Sopipouet

Baby-sitting créatif & Boutique — Sophie /* ========================================================================= POLICE DES TITRES — SUPER FUNKY Hébergée sur WordPress. WordPress renomme « Super Funky.ttf » en « super-funky.ttf » (espaces → tirets). Si ton fichier a un autre nom dans la médiathèque, corrige l’adresse ci-dessous. ========================================================================= */ @font-face { font-family: ‘Super Funky’; src: url(‘https://sopipouet.fr/wp-content/uploads/2026/10/super-funky.ttf’) format(‘truetype’), url(‘https://sopipouet.fr/wp-content/uploads/2026/10/Super-Funky.ttf’) format(‘truetype’); font-display: swap; } /* ========================================================================= 1. VARIABLES — MODIFIE LES COULEURS ICI ========================================================================= */ :root { /* Couleur des TITRES (code complété en #FF8D3B) */ –titre: #FF8D3B; /* Fond du site : FAB4BE à 31 % de transparence */ –fond: rgba(250, 180, 190, 0.31); /* Prune fraise (accroche, flèches, liens) */ –prune: #8E2A4B; –texte: #000000; –police-titre: ‘Super Funky’, ‘Baloo 2’, cursive; –police-texte: ‘Baloo 2’, sans-serif; } /* ========================================================================= 2. BASES ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(–fond); font-family: var(–police-texte); color: var(–texte); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(–prune); } h1, h2 { font-family: var(–police-titre); color: var(–titre); font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; } /* ========================================================================= 3. LES TROIS ÉCRANS ========================================================================= */ .ecran { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 48px 26px; overflow: hidden; } .ecran + .ecran { border-top: 2px dashed rgba(142, 42, 75, 0.22); } .interieur { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; } /* ========================================================================= 4. ÉCRAN 1 — LOGO ET ACCROCHE ========================================================================= */ .accueil .interieur { text-align: center; } .accueil img.logo { width: clamp(260px, 55vw, 460px); margin: 0 auto 26px; } .accueil h1 { color: var(–prune); font-size: clamp(1.5rem, 3.4vw, 2.2rem); } .activites { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; margin-top: 22px; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; } .activites a { text-decoration: none; } .activites a:hover { text-decoration: underline; } .fleche-bas { display: inline-block; margin-top: 34px; color: var(–prune); text-decoration: none; animation: rebond 2s ease-in-out infinite; } .fleche-bas svg { width: 42px; height: 42px; } @keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(11px); } } /* ========================================================================= 5. ÉCRANS 2 ET 3 — TITRE PUIS TEXTE + CARROUSEL CÔTE À CÔTE ========================================================================= */ .titre-section { display: flex; align-items: center; gap: 14px; font-size: clamp(2rem, 5.4vw, 3.2rem); margin-bottom: 6px; } .titre-section img { width: clamp(38px, 6vw, 60px); flex: none; } .trait { width: 70px; height: 3px; border-radius: 3px; background-color: var(–prune); opacity: 0.5; margin-bottom: 26px; } .duo { display: flex; align-items: center; gap: 46px; } .duo .texte { flex: 1 1 50%; } .duo .images { flex: 1 1 46%; min-width: 0; } .texte p { font-size: clamp(1.1rem, 1.35vw, 1.28rem); line-height: 1.72; margin-bottom: 16px; max-width: 40em; } .texte .accent { font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.5; } .note { font-size: 0.95rem !important; opacity: 0.72; line-height: 1.5; margin-top: 20px; } @media (max-width: 900px) { .duo { flex-direction: column; gap: 30px; } .duo .texte, .duo .images { flex: none; width: 100%; } .titre-section { justify-content: center; } .trait { margin-left: auto; margin-right: auto; } .texte p { font-size: 1.12rem; } } /* ========================================================================= 6. CARROUSELS (aucun fond, l’image seule) ========================================================================= */ .carrousel { position: relative; margin: 0 auto; width: 100%; } .carrousel-fenetre { overflow: hidden; } .carrousel-piste { display: flex; transition: transform 0.45s ease; } .carrousel-piste img { min-width: 100%; width: 100%; object-fit: contain; cursor: zoom-in; /* indique qu’on peut cliquer pour agrandir */ } /* Carrousel 1 : offres en A4 portrait */ .carrousel–a4 { max-width: min(400px, 46vh); } .carrousel–a4 .carrousel-piste img { aspect-ratio: 210 / 297; } /* Carrousel 2 : créations */ .carrousel–creations { max-width: min(520px, 62vh); } .carrousel–creations .carrousel-piste img { aspect-ratio: 1 / 1; border-radius: 14px; } .carrousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); color: var(–prune); font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .carrousel-btn:hover { background-color: #fff; } .carrousel-btn:focus-visible { outline: 3px solid var(–prune); outline-offset: 2px; } .carrousel-btn.precedent { left: -8px; } .carrousel-btn.suivant { right: -8px; } .carrousel-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 14px; } .carrousel-points button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background-color: rgba(142, 42, 75, 0.28); cursor: pointer; } .carrousel-points button.actif { background-color: var(–prune); } /* ========================================================================= 6 bis. ZOOM PLEIN ÉCRAN (au clic sur une image de carrousel) ========================================================================= */ .zoom { position: fixed; inset: 0; z-index: 100; background-color: rgba(40, 12, 24, 0.9); display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; } .zoom[hidden] { display: none; } .zoom-image { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 10px; cursor: default; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .zoom-btn, .zoom-fermer { position: absolute; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.85); color: var(–prune); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } .zoom-btn:hover, .zoom-fermer:hover { background-color: #fff; } .zoom-btn:focus-visible, .zoom-fermer:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .zoom-btn { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.4rem; } .zoom-btn.zoom-precedent { left: 14px; } .zoom-btn.zoom-suivant { right: 14px; } .zoom-fermer { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 1.8rem; } .zoom-compteur { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #fff; font-size: 0.95rem; opacity: 0.8; } @media (max-width: 600px) { .zoom-btn { width: 40px; height: 40px; font-size: 1.15rem; } .zoom-btn.zoom-precedent { left: 6px; } .zoom-btn.zoom-suivant { right: 6px; } } /* ========================================================================= 7. PIED DE PAGE ========================================================================= */ .pied-page { position: relative; z-index: 1; text-align: center; margin-top: 44px; padding-top: 24px; border-top: 2px dashed rgba(142, 42, 75, 0.22); } .contacts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 1.05rem; } .contacts a { text-decoration: none; font-weight: 600; } .contacts a:hover { text-decoration: underline; } .mention { margin-top: 16px; font-size: 0.82rem; opacity: 0.6; } /* ========================================================================= 8. DÉCOR QUI SE DÉPLACE — fraises et animaux ========================================================================= */ .decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .decor img { position: absolute; } .decor .fraise-deco { width: clamp(28px, 4.5vw, 54px); opacity: 0.5; } .decor .animal { width: clamp(90px, 11vw, 170px); height: auto; border-radius: 12px; opacity: 0.9; } .p1 { top: 7%; left: 3%; } .p2 { top: 16%; right: 4%; } .p3 { bottom: 12%; left: 6%; } .p4 { bottom: 8%; right: 5%; } .p5 { top: 44%; left: 1.5%; } .p6 { top: 52%; right: 2%; } .p7 { top: 3%; right: 26%; } .p8 { bottom: 4%; left: 32%; } .m1 { animation: flotte 9s ease-in-out infinite; } .m2 { animation: flotte 11s ease-in-out infinite 1.2s; } .m3 { animation: derive 14s ease-in-out infinite; } .m4 { animation: derive 17s ease-in-out infinite 2s; } .m5 { animation: derive 15s ease-in-out infinite 1s; } @keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-20px) rotate(8deg); } } @keyframes derive { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 33% { transform: translate(16px, -20px) rotate(3deg); } 66% { transform: translate(-12px, 14px) rotate(-2deg); } } @media (max-width: 780px) { .decor .animal { width: 82px; opacity: 0.75; } .decor .cache-mobile { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fleche-bas, .decor img { animation: none; } .carrousel-piste { transition: none; } }

Retrouve ma boutique

Baby-sitting créatif

Bienvenue dans l’univers du baby-sitting créatif ! À mi-chemin entre le baby-sitting à domicile et un cours d’arts plastiques, pour encourager votre enfant dans ses élans créatifs.

Ici, je vous présente les programmes d’ateliers, les créneaux et les tarifs. Pour toute information ou pour réserver un créneau, contactez-moi au <!– TÉLÉPHONE À AJOUTER ICI : 06 00 00 00 00 –> (SMS ou appel, je m’appelle Sophie), ou sur <!– INSTAGRAM À AJOUTER ICI : @ton_compte –> .

Un premier rendez-vous avec parents et enfants est demandé, pour apprendre à connaître le foyer et établir un lien de confiance mutuel.

* Liste non exhaustive d’ateliers : si l’enfant a une envie particulière, je suis ouverte à d’autres activités créatives.

<!– —————————————————————– CARROUSEL 1 — LES OFFRES (A4 portrait) — 3 images Fichiers WordPress : offre1, offre2, offre3 (extension trouvée automatiquement). POUR AJOUTER UNE IMAGE : copie une ligne et change le numéro. —————————————————————– –>
Offre 1 Offre 2 Offre 3

La boutique !

Bienvenue dans la partie création couture ! Je vous présente ici un exemplaire de chaque produit que je propose chaque mardi au marché de Prades.

Tout est cousu main, avec des matières premières au maximum naturelles et recyclées. Si vous aimez un produit, contactez-moi au <!– TÉLÉPHONE À AJOUTER ICI : 06 00 00 00 00 –> (SMS ou appel, je m’appelle Sophie), ou par mail à <!– ADRESSE MAIL À AJOUTER ICI : ton@mail.com –> .

* Les produits présentés sont des modèles d’exposition. Chaque pièce est unique : il est possible que vous ne puissiez pas acquérir exactement la pièce que vous voyez à l’écran.

<!– —————————————————————– CARROUSEL 2 — LES CRÉATIONS — 11 images Fichiers WordPress : caroussel1 à caroussel11 (les orthographes "carousel" et "carrousel" sont aussi testées automatiquement). POUR AJOUTER UNE IMAGE : copie une ligne et change le numéro. —————————————————————– –>
Création 1 Création 2 Création 3 Création 4 Création 5 Création 6 Création 7 Création 8 Création 9 Création 10 Création 11

© Sophie — Baby-sitting créatif & créations couture

/* ========================================================================= ADRESSE D’HÉBERGEMENT DES IMAGES (WordPress) Si tu ajoutes des images un autre mois, WordPress les range dans un autre dossier (ex. …/2026/11/). Dans ce cas, mets l’adresse complète dans data-fichier, ex. : data-fichier= »https://sopipouet.fr/wp-content/uploads/2026/11/caroussel12&Prime; ========================================================================= */ var ADRESSE_IMAGES = ‘https://sopipouet.fr/wp-content/uploads/2026/10/&rsquo;; /* ========================================================================= A. CHARGEMENT DES IMAGES DEPUIS WORDPRESS Le script essaie le nom en minuscules puis tel qu’écrit, avec .png, .jpg, .jpeg, .webp (et majuscules), ainsi que les variantes caroussel / carousel / carrousel et animaux / animal. Une image introuvable est retirée (et le carrousel se recalcule). ========================================================================= */ (function () { var extensions = [‘.png’, ‘.jpg’, ‘.jpeg’, ‘.webp’, ‘.PNG’, ‘.JPG’, ‘.JPEG’]; function ajouter(liste, valeur) { if (liste.indexOf(valeur) === -1) { liste.push(valeur); } } document.querySelectorAll(‘img[data-fichier]’).forEach(function (image) { var nom = image.getAttribute(‘data-fichier’); var adresse = /^https?:\/\//i.test(nom) ?  » : ADRESSE_IMAGES; var noms = []; ajouter(noms, nom.toLowerCase()); ajouter(noms, nom); noms.slice().forEach(function (n) { if (/caroussel/i.test(n)) { ajouter(noms, n.replace(/caroussel/i, ‘carousel’)); ajouter(noms, n.replace(/caroussel/i, ‘carrousel’)); } if (/animaux/i.test(n)) { ajouter(noms, n.replace(/animaux/i, ‘animal’)); } }); var pistes = []; noms.forEach(function (n) { extensions.forEach(function (ext) { pistes.push(adresse + n + ext); }); }); var i = 0; image.addEventListener(‘error’, function () { i++; if (i 1; precBtn.style.display = plusieurs ?  » : ‘none’; suivBtn.style.display = plusieurs ?  » : ‘none’; } function ouvrir(images, n) { liste = images; if (!liste.length) return; dernierFocus = document.activeElement; afficher(n); fenetre.hidden = false; document.body.style.overflow = ‘hidden’; fermerBtn.focus(); } function fermer() { fenetre.hidden = true; document.body.style.overflow =  »; if (dernierFocus) { dernierFocus.focus(); } } fermerBtn.addEventListener(‘click’, fermer); precBtn.addEventListener(‘click’, function (e) { e.stopPropagation(); afficher(index – 1); }); suivBtn.addEventListener(‘click’, function (e) { e.stopPropagation(); afficher(index + 1); }); image.addEventListener(‘click’, function (e) { e.stopPropagation(); }); fenetre.addEventListener(‘click’, fermer); // clic sur le fond = fermer document.addEventListener(‘keydown’, function (e) { if (fenetre.hidden) return; if (e.key === ‘Escape’) { fermer(); } if (e.key === ‘ArrowLeft’) { afficher(index – 1); } if (e.key === ‘ArrowRight’) { afficher(index + 1); } }); // Glisser du doigt dans le zoom var departX = null; fenetre.addEventListener(‘touchstart’, function (e) { departX = e.touches[0].clientX; }, { passive: true }); fenetre.addEventListener(‘touchend’, function (e) { if (departX === null || liste.length 50) { afficher(index – 1); } if (ecart 1; precedent.style.display = plusieurs ?  » : ‘none’; suivant.style.display = plusieurs ?  » : ‘none’; zonePoints.style.display = plusieurs ?  » : ‘none’; aller(Math.min(index, Math.max(images.length – 1, 0))); } carrousel.reconstruire = reconstruire; precedent.addEventListener(‘click’, function () { aller(index – 1); }); suivant.addEventListener(‘click’, function () { aller(index + 1); }); // Clic sur une image = zoom piste.addEventListener(‘click’, function (e) { if (e.target.tagName !== ‘IMG’) return; zoom.ouvrir(images, images.indexOf(e.target)); }); // Glisser du doigt var departX = null; carrousel.addEventListener(‘touchstart’, function (e) { departX = e.touches[0].clientX; }, { passive: true }); carrousel.addEventListener(‘touchend’, function (e) { if (departX === null) return; var ecart = e.changedTouches[0].clientX – departX; if (ecart > 50) { aller(index – 1); } if (ecart < -50) { aller(index + 1); } departX = null; }); reconstruire(); });