/* ========================================================= LE COIN DES ENFANTS Deux habillages, une seule feuille : — « atelier-enfants » et « jeu-guide » reprennent la manière des mini-guides : papier crème, Fredoka, gros aplats de couleur, et un semis de formes en filigrane derrière la page ; — « jeu-rose » emprunte à la rubrique Lifestyle son fuchsia et son rose poudré, pour le jeu des paires. Tout est enfermé sous ces trois classes de : aucune de ces règles n'atteint le reste du site. ========================================================= */ body.atelier-enfants, body.jeu-guide, body.jeu-rose { --gd-encre: #14110e; --gd-vermillon: #d1402a; --gd-jaune: #f5b921; --gd-bleu: #1b6ec2; --gd-vert: #3f9c53; --gd-sable: #e8d7bb; --gd-papier: #fdfaf3; --gd-ronde: 'Fredoka', 'Poppins', sans-serif; --rs-fuchsia: #ff1f8e; --rs-rose: #ffd6ec; --rs-ivoire: #faf6f0; --rs-jaune: #f5e642; --rs-ocean: #1b6ca8; --rs-noir: #1a1a1a; } /* ---------- Le filigrane ---------- Le motif se choisit dans les réglages ; ici on ne fixe que le papier et la teinte du dessin. */ body.atelier-enfants, body.jeu-guide { --fond-teinte: #e3d5bd; background-color: var(--gd-papier); } /* Les titres passent à la ronde des mini-guides */ body.atelier-enfants .page-head h1, body.atelier-enfants .section-head h2, body.jeu-guide .page-head h1 { font-family: var(--gd-ronde); letter-spacing: -.01em; } /* ---------- La page « Jeux et coloriages » ---------- */ /* Les cartes se posent sur le papier sans se fondre dedans */ body.atelier-enfants .col-carte { background: #fff; border: 2px solid var(--gd-encre); border-radius: 18px; box-shadow: 6px 6px 0 var(--gd-sable); transition: transform .12s, box-shadow .12s; } body.atelier-enfants .col-carte:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--gd-jaune); } body.atelier-enfants .col-carte-titre { font-family: var(--gd-ronde); font-size: 1.15rem; } body.atelier-enfants .col-carte-lien { color: var(--gd-vermillon); font-weight: 600; } /* Chaque section porte sa barre de couleur, comme les titres des guides */ body.atelier-enfants .section-head { border: 0; position: relative; padding-top: 26px; } body.atelier-enfants .section-head::before { content: ''; position: absolute; top: 0; left: 0; width: 92px; height: 15px; border-radius: 8px; background: var(--gd-vermillon); transform: rotate(-1.2deg); } body.atelier-enfants .section-head.atelier-suite::before { background: var(--gd-bleu); } /* ---------- Le puzzle, à la manière des mini-guides ---------- */ body.jeu-guide .pz-jeu { background: #fffdf7; border: 2px solid var(--gd-encre); border-radius: 22px; box-shadow: 8px 8px 0 var(--gd-sable); } body.jeu-guide .pz-plateau { border: 3px dashed var(--gd-sable); background-color: #fff; } body.jeu-guide .pz-niveau { font-family: var(--gd-ronde); font-size: 1rem; border: 2px solid var(--gd-encre); border-radius: 12px; } body.jeu-guide .pz-niveau.est-actif { background: var(--gd-bleu); border-color: var(--gd-bleu); } body.jeu-guide .pz-compte { font-family: var(--gd-ronde); font-size: 1.15rem; } body.jeu-guide .pz-modele img { border: 3px solid #fff; box-shadow: 4px 4px 0 var(--gd-sable); } body.jeu-guide .pz-modele figcaption { font-family: var(--gd-ronde); letter-spacing: .1em; } body.jeu-guide .pz-bravo-mot, body.jeu-guide .pz-depart .btn { font-family: var(--gd-ronde); } body.jeu-guide .pz-bravo-mot { color: var(--gd-vermillon); } body.jeu-guide .pz-bravo, body.jeu-guide .pz-depart { border: 2px solid var(--gd-encre); } /* ---------- Le jeu des paires, en rose ---------- */ body.jeu-rose { --fond-teinte: #fbdcee; background-color: var(--rs-ivoire); } body.jeu-rose .page-head h1 { font-family: 'Playfair Display', Georgia, serif; color: var(--rs-fuchsia); } body.jeu-rose .breadcrumb a { color: var(--rs-ocean); } .pr { width: 100%; margin-top: 8px; } .pr-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; } .pr-compte { margin: 0; font-family: 'Bebas Neue', 'Poppins', sans-serif; font-size: 1.6rem; letter-spacing: .06em; color: var(--rs-fuchsia); } .pr-compte-mot { color: var(--rs-noir); opacity: .6; font-size: 1.1rem; } .pr-commandes { margin-left: auto; } .pr-table { position: relative; } /* Le plateau s'élargit avec le nombre de cartes : quatre par rangée sur un téléphone, jusqu'à six sur un écran large. */ .pr-plateau { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 14px; max-width: 820px; margin: 0 auto; padding: 18px; border-radius: 22px; background: #fff; border: 3px solid var(--rs-fuchsia); box-shadow: 8px 8px 0 var(--rs-rose); } /* Une carte : deux faces qui tournent sur place */ .pr-carte { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; -webkit-tap-highlight-color: transparent; } .pr-dos, .pr-face { position: absolute; inset: 0; border-radius: 14px; display: grid; place-content: center; gap: 4px; backface-visibility: hidden; transition: transform .32s ease; } .pr-dos { background: var(--rs-fuchsia); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M30 14l4 9 9 4-9 4-4 9-4-9-9-4 9-4z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 46px 46px; border: 3px solid var(--rs-noir); transform: rotateY(0deg); } .pr-face { background: var(--rs-rose); border: 3px solid var(--rs-noir); transform: rotateY(180deg); padding: 10px; } .pr-face img { width: 100%; height: auto; max-height: 88px; object-fit: contain; } .pr-nom { font-family: 'Bebas Neue', 'Poppins', sans-serif; font-size: .82rem; letter-spacing: .08em; color: var(--rs-noir); text-align: center; } .pr-carte.est-ouverte .pr-dos, .pr-carte.est-trouvee .pr-dos { transform: rotateY(-180deg); } .pr-carte.est-ouverte .pr-face, .pr-carte.est-trouvee .pr-face { transform: rotateY(0deg); } .pr-carte.est-trouvee { cursor: default; } .pr-carte.est-trouvee .pr-face { background: var(--rs-jaune); border-color: var(--rs-fuchsia); } .pr-bravo[hidden] { display: none; } .pr-bravo { position: absolute; inset: auto 12px 12px; display: grid; justify-items: center; gap: 8px; padding: 16px 20px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .95); border: 3px solid var(--rs-fuchsia); box-shadow: 0 8px 22px rgba(26, 26, 26, .18); } .pr-bravo-mot { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; color: var(--rs-fuchsia); } .pr-bravo-note { margin: 0; color: var(--rs-noir); opacity: .7; } @media (max-width: 640px) { .pr-plateau { gap: 9px; padding: 12px; } .pr-commandes { margin-left: 0; } .pr-nom { display: none; } } /* ── Sur un téléphone, le plateau doit tenir dans l'écran ── `minmax(104px, 1fr)` donnait DEUX colonnes sur 375 px : vingt-quatre cartes, douze rangées, un plateau de quatre mille pixels de haut. Or un jeu de paires se joue de mémoire — il faut voir où était la carte. Un plateau qu'on parcourt en défilant n'est plus un jeu de mémoire, c'est une loterie. Quatre colonnes de soixante-dix points : les vingt-quatre cartes tiennent en six rangées, et le plateau entier se voit d'un coup. */ @media (max-width: 560px) { .pr-plateau { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 9px; border-radius: 16px; border-width: 2px; box-shadow: 5px 5px 0 var(--rs-rose); } } /* En dessous de 380 px, le plateau déborderait : on resserre encore. */ @media (max-width: 380px) { .pr-plateau { gap: 5px; padding: 7px; } } @media (prefers-reduced-motion: reduce) { .pr-dos, .pr-face { transition: none; } } /* ========================================================= LE SALON D ONGLES ========================================================= Aucune image : la main, les vernis et les motifs sont dessines. Le jeu pese donc le poids de son texte, et rien ne peut lui manquer. */ .on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .on-scene { background: #fdeef3; border-radius: 18px; padding: 22px; text-align: center; } .on-main { width: 100%; max-width: 380px; height: auto; /* Une ombre portee tres douce sous la main : elle detache la peau du fond rose sans qu on ait a lui dessiner un contour. */ } /* La main : des formes simples posees les unes sur les autres. Le contour n est pas trace autour de chacune — on verrait les raccords — mais seulement autour de l ensemble, par le filtre du dessous. */ /* La main : un seul trace, paume et doigts d une meme ligne. */ .on-peau { fill: #f6d9c8; stroke: #e3b9a2; stroke-width: 2; } .on-ongle { cursor: pointer; transition: filter .15s ease; } .on-ongle:hover { filter: brightness(1.08); } .on-ongle:focus-visible { outline: 3px solid #14110e; outline-offset: 2px; } .on-contours ellipse { fill: none; stroke: #d9a993; stroke-width: 2; pointer-events: none; } .on-panneaux { display: flex; flex-direction: column; gap: 26px; } .on-panneau h2 { font-size: 1.05rem; margin: 0 0 12px; } .on-aide { font-size: .85rem; color: #6d655a; margin: -6px 0 12px; } /* ---- Les vernis ---- Des pastilles, pas des noms : on choisit une couleur en la voyant. */ .on-teintes { display: flex; flex-wrap: wrap; gap: 10px; } .on-teinte { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(20, 17, 14, .12); padding: 0; transition: transform .15s ease, box-shadow .15s ease; } .on-teinte:hover { transform: scale(1.08); } .on-teinte.est-choisi { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #14110e; } /* « Sans vernis » n est pas une couleur : on le dessine en creux. */ .on-teinte.est-nu { background: repeating-linear-gradient(45deg, #fff 0 6px, #efece7 6px 12px); } /* ---- Les motifs ---- Chacun se montre sur un petit ongle : un nom seul ne dit pas ce qu on va poser. */ /* Vingt-deux motifs : une grille serree, sans nom sous chacun. Le dessin dit ce qu il fait mieux qu un mot, et vingt-deux mots feraient un inventaire. Le nom reste dans l infobulle et pour les lecteurs d ecran. */ .on-motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; } .on-motif { display: block; padding: 5px; cursor: pointer; background: #fff; border: 1px solid #f0dbe3; border-radius: 10px; line-height: 0; } .on-motif:hover { border-color: #e4577f; } .on-motif.est-choisi { border-color: #c23a63; box-shadow: inset 0 0 0 1px #c23a63; } .on-motif-vue { width: 100%; height: auto; aspect-ratio: 1; display: block; } .on-rangee { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 820px) { .on { grid-template-columns: 1fr; gap: 26px; } .on-main { max-width: 300px; } } /* ========================================================= LA PIZZA A GARNIR ========================================================= Comme le salon d ongles : aucune image. La pate, les sauces et les ingredients sont dessines par le navigateur. */ .pz2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .pz2-scene { background: #f6efe3; border-radius: 18px; padding: 22px; text-align: center; } .pz2-disque { width: 100%; max-width: 380px; height: auto; } /* La croute et la pate, crues. */ .pz2-croute { fill: #e6c48a; } .pz2-pate { fill: #f2dcb0; } /* Et cuites : la croute dore, la pate brunit, et l ensemble prend une ombre chaude. La cuisson n est pas une image de plus — c est la meme pizza, autrement coloree. */ .pz2-disque.est-cuite .pz2-croute { fill: #cf9a4e; } .pz2-disque.est-cuite .pz2-pate { fill: #e0bd7d; } .pz2-disque.est-cuite { filter: saturate(1.12) contrast(1.04); } /* Les parts : des traits fins qui passent par-dessus tout. */ .pz2-parts line { stroke: rgba(90, 60, 30, .55); stroke-width: 3; stroke-linecap: round; } .pz2-panneaux { display: flex; flex-direction: column; gap: 24px; } .pz2-panneau h2 { font-size: 1.05rem; margin: 0 0 12px; } .pz2-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .pz2-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; cursor: pointer; background: #fff; border: 1px solid #ecdfc9; border-radius: 10px; font-size: .74rem; color: #6d655a; line-height: 1.2; text-align: center; } .pz2-item:hover { border-color: #c3341f; } .pz2-item.est-choisi { border-color: #a5291a; box-shadow: inset 0 0 0 1px #a5291a; } .pz2-item-vue { width: 46px; height: 46px; display: block; } .pz2-rangee { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 820px) { .pz2 { grid-template-columns: 1fr; gap: 26px; } .pz2-disque { max-width: 300px; } }