:root { --ink:#28433c; --cream:#fffaf0; --yellow:#f7cb54; --pink:#ed8378; --blue:#94c9d9; --peach:#f7dfc7; --line:#28433c20; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Nunito, sans-serif; font-size:16px; line-height:1.5; } a { color:inherit; text-decoration:none; } .section-wrap { width:min(1160px, calc(100% - 48px)); margin:auto; } .skip-link { position:fixed; top:-4rem; left:1rem; z-index:10; background:var(--ink); color:white; padding:.6rem 1rem; border-radius:0 0 .5rem .5rem; } .skip-link:focus { top:0; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1240px, calc(100% - 48px)); margin:auto; position:relative; z-index:2; }.brand { display:flex; align-items:center; gap:9px; font-family:"Baloo 2",cursive; font-size:16px; line-height:.85; font-weight:600; }.brand strong { font-size:20px; }.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:50% 46% 52% 43%; transform:rotate(-12deg); background:var(--pink); color:white; font-family:"Baloo 2"; font-size:25px; font-weight:800; }.main-nav { display:flex; gap:27px; font-weight:700; font-size:14px; }.main-nav a:hover,.text-link:hover,.site-footer a:hover { color:var(--pink); }.contact-link { border-bottom:2px solid var(--ink); font-weight:800; font-size:14px; padding-bottom:2px; }.menu-toggle { display:none; }
.hero { min-height:700px; position:relative; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; padding:66px 0 115px; }.hero-copy { position:relative; z-index:1; }.eyebrow { margin:0 0 16px; color:var(--ink); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }.eyebrow span { display:inline-block; width:30px; height:2px; vertical-align:middle; margin-right:9px; background:var(--yellow); }.eyebrow-pink span { background:var(--pink); }.eyebrow-blue span { background:var(--blue); } h1,h2,h3 { font-family:"Baloo 2",cursive; line-height:.96; letter-spacing:-.03em; margin:0; } h1 { font-size:clamp(55px,6.2vw,83px); font-weight:800; } h2 { font-size:clamp(40px,4.6vw,60px); font-weight:800; } h1 em,h2 em { font-style:normal; color:var(--pink); }.placeholder-copy { max-width:450px; margin:28px 0; color:#52645f; font-size:17px; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:23px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:14px 22px; border:0; border-radius:99px; font:800 14px Nunito,sans-serif; cursor:pointer; transition:transform .2s,box-shadow .2s; }.button:hover { transform:translateY(-2px); box-shadow:0 6px 0 #28433c20; }.button-primary { background:var(--yellow); }.button-dark { background:var(--ink); color:white; }.button-ghost { text-decoration:underline; text-underline-offset:5px; font-weight:800; font-size:14px; }
.hero-art { position:relative; height:500px; border-radius:46% 54% 42% 58% / 50% 44% 56% 50%; background:#b9dfea; overflow:hidden; transform:rotate(2deg); }.hero-art p { position:absolute; bottom:22px; left:50%; transform:translateX(-50%) rotate(-2deg); width:max-content; max-width:90%; margin:0; padding:5px 11px; border-radius:99px; background:#fffdf7c9; font-size:11px; font-weight:700; }.sun { position:absolute; width:108px; height:108px; top:42px; right:73px; background:var(--yellow); border-radius:50%; }.cloud { position:absolute; width:113px; height:28px; background:#fffaf0bd; border-radius:99px; }.cloud:before,.cloud:after { content:""; position:absolute; background:inherit; border-radius:50%; }.cloud:before { width:38px;height:38px;bottom:0;left:20px; }.cloud:after { width:48px;height:48px;bottom:0;right:17px; }.cloud-one { top:109px; left:45px; }.cloud-two { bottom:72px; right:18px; transform:scale(.65); }.character-placeholder { position:absolute; width:210px; height:310px; left:50%; top:53%; transform:translate(-50%,-50%) rotate(-4deg); display:grid; place-items:center; text-align:center; color:#fff; font-size:13px; font-weight:800; letter-spacing:.12em; line-height:1.5; background:var(--pink); border:7px solid #f6e2cc; border-radius:49% 51% 46% 54% / 27% 29% 71% 73%; box-shadow:0 8px 0 #28433c12; }.character-placeholder:before,.character-placeholder:after { content:""; position:absolute; z-index:-1; width:92px; height:90px; background:#f6e2cc; border-radius:52% 48% 40% 60%; }.character-placeholder:before { left:-60px; bottom:-21px; transform:rotate(-26deg); }.character-placeholder:after { right:-52px; bottom:-37px; transform:rotate(39deg); }.sparkle { position:absolute; color:white; font-size:26px; }.sparkle-one { top:75px; left:62px; }.sparkle-two { bottom:118px; left:74px; color:var(--yellow); }.scroll-cue { position:absolute; bottom:37px; display:flex; gap:10px; align-items:center; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }.scroll-cue span { width:32px; border-top:1px solid var(--ink); }
.identity { padding:110px 0 130px; display:grid; grid-template-columns: .8fr 1fr; gap:72px 92px; align-items:center; }.media-placeholder { display:grid; place-items:center; text-align:center; color:#28433c; border:2px dashed #28433c70; background-color:#f7dfc7; background-image:radial-gradient(#fffaf080 1px,transparent 1px); background-size:13px 13px; font-weight:800; letter-spacing:.11em; font-size:13px; line-height:1.5; }.identity-photo { height:390px; border-radius:48% 52% 39% 61% / 47% 38% 62% 53%; transform:rotate(-4deg); }.identity-copy .text-link { font-weight:800; text-decoration:underline; text-underline-offset:5px; }.values-card { grid-column:2; margin-top:-24px; padding:25px 28px 28px; border-radius:20px; background:#fff; box-shadow:0 16px 28px #28433c0f; }.values-card p { margin:0 0 15px; font:700 17px "Baloo 2"; }.value-pills { display:flex; flex-wrap:wrap; gap:8px; }.value-pills span { padding:5px 10px; border-radius:99px; background:#f7dfc7; font-size:12px; font-weight:800; }.value-pills span:nth-child(3n+2){ background:#dceff3; }.value-pills span:nth-child(3n){ background:#f9e2e0; }
.books-section { padding:105px 0 94px; background:var(--peach); }.section-heading { margin-bottom:45px; }.split-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; }.books-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.book-card { padding:16px 16px 20px; border-radius:16px; background:#fffdf8; box-shadow:0 12px 16px #28433c0d; }.book-cover { aspect-ratio: .74; display:grid; place-items:center; padding:14px; text-align:center; font:800 17px "Baloo 2"; letter-spacing:.06em; line-height:1.15; border:2px dashed #28433c60; color:var(--ink); }.cover-one { background:var(--yellow); }.cover-two { background:var(--pink); color:white; }.cover-three { background:var(--blue); }.book-info { padding:19px 8px 0; }.book-info p { margin:0 0 3px; font:700 21px "Baloo 2"; line-height:1.1; }.book-info span { font-size:12px; color:#65756f; }.book-info a { float:right; margin-top:-18px; font-size:12px; font-weight:800; }.book-info b { color:var(--pink); font-size:18px; vertical-align:-1px; }.section-note { text-align:center; margin:36px auto 0; max-width:680px; color:#63736d; font-size:13px; }
.listen-section { padding:130px 0; display:grid; grid-template-columns:.86fr 1fr; gap:110px; align-items:center; }.listen-art { aspect-ratio:.95; border-radius:55% 45% 52% 48% / 42% 52% 48% 58%; background-color:var(--yellow); transform:rotate(3deg); }.audio-player { display:grid; grid-template-columns:39px 1fr 1.5fr auto; align-items:center; gap:12px; margin:30px 0 25px; padding:13px 16px; background:white; border-radius:14px; box-shadow:0 10px 24px #28433c0e; font-size:11px; }.audio-player div:nth-child(2) { display:grid; gap:2px; }.audio-player div:nth-child(2) span { color:#71807b; }.play-button { display:grid; place-items:center; width:34px; height:34px; padding-left:4px; border:0; border-radius:50%; color:white; background:var(--pink); cursor:pointer; }.progress { height:4px; border-radius:6px; background:#dce8e5; overflow:hidden; }.progress i { display:block; width:38%; height:100%; background:var(--pink); }
.play-section { padding:105px 0 115px; background:#d9eff0; }.center-heading { text-align:center; }.center-heading .placeholder-copy { margin:18px auto 0; }.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:45px; }.activity-card { min-height:275px; padding:29px; border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; transition:transform .2s; }.activity-card:hover { transform:translateY(-5px) rotate(-1deg); }.activity-yellow { background:var(--yellow); }.activity-coral { background:var(--pink); color:white; }.activity-blue { background:#90c9dc; }.activity-icon { display:grid; width:47px; height:47px; place-items:center; border-radius:50%; background:#fffaf0d1; font-size:26px; }.activity-card h3 { margin:35px 0 5px; font-size:29px; }.activity-card p { margin:0; font-size:13px; }.activity-card b { margin-top:auto; font-size:13px; }
.news-section { padding:118px 0 130px; }.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.news-image { height:205px; border-radius:13px; background-color:#d9eff0; }.news-grid article:nth-child(2) .news-image { background-color:#f7dfc7; }.news-grid article:nth-child(3) .news-image { background-color:#f8e8a7; }.news-grid p { margin:15px 0 4px; color:#75837e; text-transform:uppercase; font-size:10px; letter-spacing:.1em; font-weight:800; }.news-grid h3 { font-size:23px; }.news-grid a { display:inline-block; margin-top:12px; font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:4px; }.contact-section { background:var(--pink); color:white; padding:100px 0; }.contact-section .eyebrow span { background:var(--yellow); }.contact-section h2 em { color:var(--yellow); }.contact-section .placeholder-copy { color:#fff5f1; }.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:start; }.contact-form { padding:26px; border-radius:18px; color:var(--ink); background:#fffaf0; display:grid; gap:14px; }.contact-form label { display:grid; gap:5px; font-size:12px; font-weight:800; }.contact-form input,.contact-form textarea { width:100%; border:1px solid #28433c2b; padding:10px 12px; border-radius:8px; background:white; color:var(--ink); font:14px Nunito,sans-serif; }.contact-form textarea { height:86px; resize:vertical; }.contact-form .button { margin-top:4px; justify-content:space-between; }.site-footer { padding:40px 0; display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:11px; }.site-footer p { margin:0; color:#6d7c76; }.site-footer div { display:flex; gap:15px; font-weight:800; }
@media (max-width:760px) { .section-wrap,.site-header { width:min(100% - 34px, 520px); }.site-header { height:72px; }.main-nav,.contact-link { display:none; }.menu-toggle { display:block; margin-left:auto; border:1px solid var(--line); background:transparent; border-radius:99px; padding:8px 12px; color:var(--ink); font:800 12px Nunito; }.main-nav.is-open { position:absolute; display:grid; gap:12px; top:65px; right:0; padding:20px; border-radius:14px; background:#fffaf0; box-shadow:0 10px 30px #28433c22; }.hero { min-height:unset; grid-template-columns:1fr; padding:55px 0 90px; gap:45px; }.hero-art { height:390px; order:-1; }.hero-copy { text-align:center; }.hero-copy .placeholder-copy { margin-left:auto;margin-right:auto; }.hero-actions { justify-content:center; }.scroll-cue { display:none; } .identity,.listen-section,.contact-inner { grid-template-columns:1fr; gap:42px; padding:75px 0; }.identity-photo { height:320px; }.values-card { grid-column:auto; margin-top:-15px; }.split-heading { align-items:flex-start; flex-direction:column; }.books-section,.play-section { padding:75px 0; }.books-grid,.activity-grid,.news-grid { grid-template-columns:1fr; }.book-card { display:grid; grid-template-columns:130px 1fr; gap:16px; }.book-cover { aspect-ratio:auto; min-height:160px; }.book-info { padding-top:8px; }.book-info a { float:none; display:block; margin-top:20px; }.listen-art { width:min(100%,370px); margin:auto; }.audio-player { grid-template-columns:39px 1fr auto; }.audio-player .progress { grid-column:2/4; }.news-section { padding:75px 0; }.news-image { height:180px; }.site-footer { flex-wrap:wrap; }.site-footer div { width:100%; flex-wrap:wrap; } }

/* Catalogue, média et administration — données à raccorder au CMS. */
.book-actions { display:flex; gap:7px; margin-top:17px; }.book-actions button,.printable-grid button { border:1px solid #28433c32; background:transparent; border-radius:99px; padding:5px 8px; color:var(--ink); font:800 10px Nunito; cursor:pointer; }.book-actions button:hover,.printable-grid button:hover { background:var(--ink); color:white; }
.music-section { padding:104px 0; background:var(--ink); color:white; }.music-inner { display:grid; grid-template-columns:.9fr 1fr; gap:95px; align-items:center; }.music-section h2 em { color:var(--yellow); }.music-section .placeholder-copy { color:#e9f1e6; }.rights-note { margin:27px 0 0; font-size:11px; font-weight:700; opacity:.72; }.track-list { display:grid; gap:10px; }.track-list article { display:grid; grid-template-columns:36px 1fr 32px; align-items:center; gap:13px; padding:13px; border-radius:12px; background:#fffaf012; }.track-list .play-button { width:31px; height:31px; font-size:10px; }.track-list b,.track-list small { display:block; }.track-list b { font:700 16px "Baloo 2"; }.track-list small { margin-top:1px; font-size:10px; opacity:.75; }.round-action { display:grid; place-items:center; width:28px; height:28px; border:1px solid #fff8; border-radius:50%; background:transparent; color:white; font-size:18px; cursor:pointer; }.payment-note { margin-top:10px; padding:12px 0 0; border-top:1px solid #ffffff33; font-size:11px; opacity:.76; }
.video-section { padding:120px 0; }.filter-group { display:flex; gap:8px; flex-wrap:wrap; }.filter { border:1px solid var(--line); padding:7px 12px; border-radius:99px; color:var(--ink); background:transparent; font:800 11px Nunito; cursor:pointer; }.filter.is-active,.filter:hover { background:var(--ink); color:white; }.video-grid { display:grid; grid-template-columns:1.34fr 1fr 1fr; gap:22px; }.video-placeholder { position:relative; display:grid; place-items:center; min-height:190px; border:2px dashed #28433c70; background:#d9eff0; color:var(--ink); text-align:center; font-size:12px; font-weight:800; letter-spacing:.1em; line-height:1.5; }.feature-video .video-placeholder { min-height:305px; border-radius:18px; background:#f7dfc7; }.video-card .video-placeholder { border-radius:13px; }.large-play,.small-play { position:absolute; display:grid; place-items:center; border:0; border-radius:50%; color:white; background:var(--pink); cursor:pointer; }.large-play { width:58px; height:58px; padding-left:5px; font-size:18px; }.small-play { width:37px; height:37px; padding-left:3px; font-size:11px; }.video-grid p,.integration-note { margin:13px 0 4px; color:#75837e; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.video-grid h3 { font-size:23px; }.integration-note { margin:30px 0 0; text-align:center; text-transform:none; letter-spacing:0; font-weight:600; }
.printables-section { padding:115px 0; }.printable-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.printable-grid article { padding:11px; border-radius:13px; background:#fff; box-shadow:0 9px 20px #28433c0e; }.print-preview { display:grid; place-items:center; aspect-ratio:.92; text-align:center; border:2px dashed #28433c64; border-radius:8px; background:#f8e8a7; font-size:11px; font-weight:800; letter-spacing:.1em; }.printable-grid article:nth-child(2) .print-preview { background:#f8d9d5; }.printable-grid article:nth-child(3) .print-preview { background:#d9eff0; }.printable-grid article:nth-child(4) .print-preview { background:#f7dfc7; }.printable-grid h3 { min-height:34px; margin:12px 2px 9px; font-size:17px; }.printable-grid article > div:last-child { display:flex; justify-content:space-between; gap:5px; }
.contact-form select { width:100%; border:1px solid #28433c2b; padding:10px 12px; border-radius:8px; background:white; color:var(--ink); font:14px Nunito,sans-serif; }.admin-section { padding:110px 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:95px; align-items:center; }.admin-panel { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 15px 28px #28433c0b; }.admin-panel header { display:flex; justify-content:space-between; align-items:center; padding:17px 18px; color:white; background:var(--ink); font:700 17px "Baloo 2"; }.admin-panel header button { border:0; border-radius:99px; padding:7px 10px; color:var(--ink); background:var(--yellow); font:800 10px Nunito; cursor:pointer; }.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#28433c14; }.admin-stats span { display:grid; gap:1px; padding:17px; background:white; color:#70807a; font-size:10px; text-align:center; }.admin-stats b { color:var(--ink); font:800 25px "Baloo 2"; }.admin-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:12px 18px; border-top:1px solid var(--line); font-size:11px; }.admin-row span:nth-child(2) { color:#bb7a29; font-weight:800; }.admin-row button { border:0; background:transparent; color:var(--ink); font:800 11px Nunito; text-decoration:underline; cursor:pointer; }.admin-feedback { min-height:18px; margin:0; padding:0 18px 12px; color:#508f70; font-size:11px; font-weight:700; }
@media (max-width:760px) { .identity,.listen-section,.contact-inner,.music-inner,.admin-section { grid-template-columns:1fr; gap:42px; padding:75px 0; }.books-section,.play-section,.music-section { padding:75px 0; }.video-grid { grid-template-columns:1fr; }.printable-grid { grid-template-columns:repeat(2,1fr); }.news-section,.video-section,.printables-section { padding:75px 0; } }

.image-slot { overflow:hidden; position:relative; }.image-slot > img { display:none; width:100%; height:100%; object-fit:cover; }.image-slot.has-image > img { display:block; }.image-slot.has-image .image-fallback { display:none; }.character-placeholder.image-slot.has-image { width:82%; height:96%; max-height:none; border:0; background:transparent; box-shadow:none; }.character-placeholder.image-slot.has-image:before,.character-placeholder.image-slot.has-image:after { display:none; }.character-placeholder.image-slot.has-image > img { object-fit:contain; transform:scale(1.08); transform-origin:center bottom; }.admin-panel header a { border-radius:99px; padding:7px 10px; color:var(--ink); background:var(--yellow); font:800 10px Nunito; }.contact-feedback { min-height:18px; margin:0; color:#fff; font-size:12px; font-weight:800; }.contact-feedback.is-success { color:#fff7a7; }.contact-feedback.is-error { color:#5b1724; }