/* ============================================================================ KIDIBOOK V2 — DESIGN SYSTEM PARTAGÉ ---------------------------------------------------------------------------- Esprit : Duolingo × Disney Junior × Apple Education. Beaucoup de blanc, cartes flottantes très arrondies, ombres douces, dégradés très légers, micro-animations discrètes. Ce fichier est le SOCLE de toutes les pages : 1) Tokens (variables) — inclut les alias "legacy" (--ocean, --coral…) pour que les pages existantes basculent d'elles-mêmes sur la nouvelle palette sans toucher au HTML. 2) Reset léger + typographie (Baloo 2 titres / Nunito corps). 3) Composants préfixés .kb-* (voir assets/COMPOSANTS.md pour les fragments HTML exacts à copier). 4) Couche de compatibilité : les classes historiques du site (.nav, .btn, .section, .eyebrow…) sont re-stylées dans la nouvelle DA. Polices (dans , avant ce fichier) : ========================================================================== */ /* ============================== 1. TOKENS ================================= */ :root{ /* — Palette par niveau (mascottes) — */ --kb-gs:#0D4C5C; /* Bibou · Grande Section · bleu pétrole */ --kb-cp:#FFD23F; /* Plouf · CP · jaune */ --kb-ce1:#FF8A00; /* Léo · CE1 · orange */ --kb-ce2:#7B61FF; /* Astro · CE2 · violet */ --kb-cm1:#36B24A; /* Rex · CM1 · vert */ --kb-cm2:#2060CF; /* Gauvain· CM2 · bleu royal */ /* — Couleurs de marque — */ --kb-accent:#FF4081; /* rose CTA — 3,33:1 : réservé au GRAND texte (≥18,66 px gras) et aux aplats décoratifs */ --kb-accent-dark:#E62E6F; --kb-accent-text:#C2185B; /* rose lisible — 5,87:1 : petits libellés, badges, texte rose sur fond blanc */ --kb-ink:#17323B; /* encre */ --kb-muted:#5A727B; /* texte secondaire */ --kb-cream:#FFFDF8; /* fond crème */ --kb-card:#FFFFFF; /* cartes blanches */ --kb-petrol:#0D4C5C; /* pétrole (footer, header brand) */ --kb-petrol-deep:#093642; /* — Ombres — */ --kb-shadow:0 10px 30px rgba(23,50,59,.08); --kb-shadow-hover:0 18px 40px rgba(23,50,59,.14); --kb-shadow-cta:0 10px 24px -8px rgba(255,64,129,.55); /* — Rayons — */ --kb-r-sm:14px; --kb-r:22px; /* cartes standard (20–28px) */ --kb-r-lg:28px; --kb-r-pill:999px; /* — Espacements — */ --kb-sp-1:8px; --kb-sp-2:16px; --kb-sp-3:24px; --kb-sp-4:36px; --kb-sp-5:56px; --kb-sp-6:84px; --kb-maxw:1140px; /* — Typo — */ --kb-font-title:"Baloo 2","Fredoka",system-ui,sans-serif; --kb-font-body:"Nunito",system-ui,sans-serif; /* — ALIAS LEGACY : les pages existantes utilisent ces variables. On les re-pointe vers la nouvelle palette : tout le site bascule. — */ --ocean:var(--kb-petrol); --ocean-deep:var(--kb-petrol-deep); --gold:#FFD23F; --gold-light:#FFE388; --coral:var(--kb-accent); /* l'ancien corail devient le rose CTA */ --cream:var(--kb-cream); --paper:var(--kb-cream); --ink:var(--kb-ink); --muted:var(--kb-muted); --radius:var(--kb-r); --shadow:var(--kb-shadow); --maxw:var(--kb-maxw); } /* ============================== 2. RESET ================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{ margin:0;font-family:var(--kb-font-body);font-weight:600; color:var(--kb-ink);background:var(--kb-cream); line-height:1.65;-webkit-font-smoothing:antialiased; overflow-x:hidden;width:100%;max-width:100%; } img,picture,video{max-width:100%;display:block} img{height:auto} a{color:inherit} button{font:inherit} :focus-visible{outline:3px solid var(--kb-accent);outline-offset:3px;border-radius:6px} /* ============================ 3. TYPOGRAPHIE ============================== */ /* Baloo 2 sur tous les titres existants (les balises restent inchangées) */ h1,h2,h3,h4,h5,h6,.kb-title{ font-family:var(--kb-font-title);font-weight:800; line-height:1.12;margin:0;color:var(--kb-petrol); letter-spacing:-.01em; } /* .kb-title : même look "titre" sur un

/ (le plan h1-h3 doit rester identique — ne JAMAIS créer de nouveaux h1/h2/h3) */ .kb-title{display:block} .kb-title--xl{font-size:clamp(2.2rem,5vw,3.4rem)} .kb-title--lg{font-size:clamp(1.7rem,3.8vw,2.5rem)} .kb-title--md{font-size:clamp(1.25rem,2.6vw,1.6rem)} .kb-title--sm{font-size:1.12rem} .kb-lead{font-size:1.15rem;color:var(--kb-muted);font-weight:600;max-width:560px} .kb-hl{color:var(--kb-accent)} /* mot mis en avant dans un titre */ /* ============================== 4. LAYOUT ================================= */ .kb-wrap,.wrap{max-width:var(--kb-maxw);margin:0 auto;padding:0 22px} .narrow{max-width:760px} .center{text-align:center} .section{padding:var(--kb-sp-6) 0} .section.alt{background:#fff} /* alternance blanc / crème */ .skip{position:absolute;left:-9999px} /* Masquage visuel SANS retrait du DOM : sert à conserver un emoji/texte d'origine tout en le remplaçant à l'écran par une vraie mascotte. */ .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:10px;z-index:100;box-shadow:var(--kb-shadow)} .sec-head{margin-bottom:var(--kb-sp-4)} .sec-head h2,.sec-head .kb-title{font-size:clamp(1.7rem,3.8vw,2.5rem)} .sec-sub{color:var(--kb-muted);max-width:640px;margin:14px auto 0;font-size:1.08rem} /* ========================= 5. HEADER STICKY =============================== */ .kb-header,.nav{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom:1px solid rgba(23,50,59,.06); transition:box-shadow .2s ease; } .kb-header.scrolled,.nav.scrolled{box-shadow:0 8px 24px -18px rgba(23,50,59,.35)} .kb-header-inner,.nav-inner{display:flex;align-items:center;gap:18px;padding:12px 22px;max-width:var(--kb-maxw);margin:0 auto} .brand{display:flex;align-items:center;gap:10px;text-decoration:none} .brand span{font-family:var(--kb-font-title);font-weight:800;font-size:1.4rem;color:var(--kb-petrol)} .brand-logo{width:40px;height:40px;border-radius:12px;object-fit:contain} .nav-links{display:flex;gap:22px;margin-left:auto;align-items:center} .nav-links a{text-decoration:none;font-weight:800;color:var(--kb-ink);font-size:.95rem;opacity:.8;position:relative;transition:opacity .15s,color .15s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:0;border-radius:3px;background:var(--kb-accent);transition:width .2s ease} .nav-links a:hover{opacity:1;color:var(--kb-petrol)} .nav-links a:hover::after{width:100%} .burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px} .burger span{width:24px;height:3px;background:var(--kb-petrol);border-radius:3px;display:block} /* ============================= 6. BOUTONS ================================= */ .kb-btn,.btn{ display:inline-flex;align-items:center;justify-content:center;gap:.45em; font-family:var(--kb-font-title);font-weight:700;font-size:1rem; text-decoration:none;cursor:pointer; padding:15px 28px;border-radius:var(--kb-r-pill);border:2px solid transparent; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease; will-change:transform; } .kb-btn:hover,.btn:hover{transform:translateY(-2px)} .kb-btn:active,.btn:active{transform:translateY(1px) scale(.98)} /* « pressé » (Stripe/Linear) */ .kb-btn--lg,.btn-lg{padding:18px 34px;font-size:1.1rem} .btn-block{display:flex;width:100%} .nav-cta{padding:11px 22px;font-size:.95rem} /* Primaire : pilule rose */ .kb-btn--primary,.btn-coral,.btn-gold,.btn-indigo{ background:var(--kb-accent);color:#fff;box-shadow:var(--kb-shadow-cta); } .kb-btn--primary:hover,.btn-coral:hover,.btn-gold:hover,.btn-indigo:hover{ background:var(--kb-accent-dark);box-shadow:0 16px 30px -8px rgba(255,64,129,.6); } /* — Lisibilité AA sur le rose CTA : libellés des pilules primaires en « grand texte » (≥ 18,66 px gras ⇒ seuil 3:1, le rose #FF4081 donne 3,33:1) — */ .kb-btn--primary,.kb-btn.kb-btn--primary,.btn.btn-coral,.btn.btn-gold,.btn.btn-indigo, .btn-coral,.btn-gold,.btn-indigo{font-size:1.17rem;font-weight:700} /* La petite pilule du header garde sa taille compacte → rose foncé AA (4,5:1+) */ .btn.nav-cta,.kb-btn.nav-cta{font-size:.95rem} .btn-gold.nav-cta,.btn-coral.nav-cta,.btn-indigo.nav-cta,.kb-btn--primary.nav-cta{background:#C2185B} .btn-gold.nav-cta:hover,.btn-coral.nav-cta:hover,.btn-indigo.nav-cta:hover, .kb-btn--primary.nav-cta:hover{background:#AD1457} /* Secondaire : blanc bordé */ .kb-btn--secondary,.btn-ghost,.btn-ghost-d{ background:#fff;color:var(--kb-petrol);border-color:rgba(13,76,92,.28); box-shadow:0 4px 14px rgba(23,50,59,.06); } .kb-btn--secondary:hover,.btn-ghost:hover,.btn-ghost-d:hover{border-color:var(--kb-petrol);box-shadow:var(--kb-shadow)} /* Secondaire sur fond sombre */ .kb-btn--light,.btn-ghost-light,.btn-ghostw{ background:transparent;color:#fff;border-color:rgba(255,255,255,.55); } .kb-btn--light:hover,.btn-ghost-light:hover,.btn-ghostw:hover{background:rgba(255,255,255,.14);border-color:#fff} /* ============================== 7. BADGES ================================= */ .kb-badge,.eyebrow{ display:inline-flex;align-items:center;gap:.4em; font-family:var(--kb-font-title);font-weight:700;font-size:.85rem; color:var(--kb-accent-text);background:#fff; /* 13,6 px ⇒ seuil 4,5:1 */ border:2px solid rgba(255,64,129,.18); padding:6px 16px;border-radius:var(--kb-r-pill);margin-bottom:16px; } .kb-badge--niveau{color:#fff;border-color:transparent;background:var(--kb-petrol)} .kb-badge--gs{background:var(--kb-gs)} .kb-badge--cp{background:var(--kb-cp);color:var(--kb-ink)} .kb-badge--ce1{background:var(--kb-ce1)} .kb-badge--ce2{background:var(--kb-ce2)} .kb-badge--cm1{background:var(--kb-cm1)} .kb-badge--cm2{background:var(--kb-cm2)} .kb-badge--soft{color:var(--kb-petrol);border-color:rgba(13,76,92,.15)} /* ============================ 8. CARTE GÉNÉRIQUE ========================== */ .kb-card{ background:var(--kb-card);border-radius:var(--kb-r); box-shadow:var(--kb-shadow);padding:var(--kb-sp-3); transition:transform .2s ease,box-shadow .2s ease; } .kb-card--hover:hover{transform:translateY(-6px);box-shadow:var(--kb-shadow-hover)} .kb-card--lg{border-radius:var(--kb-r-lg);padding:var(--kb-sp-4)} .kb-card--outline{box-shadow:none;border:2px solid rgba(23,50,59,.08)} /* ========================= 9. CARTES NIVEAU =============================== */ /* Carte mascotte/niveau : fond de la couleur du niveau, mascotte flottante, hover -6px + légère rotation de la mascotte. --lvl = couleur du niveau (fond de la carte) --lvl-ink = couleur du texte posé DESSUS. Encre sur les niveaux clairs (CP jaune, CE1 orange, CM1 vert) : le blanc n'y passe pas le seuil AA, même en grand texte (2,15 / 2,44 / 1,39:1). --lvl-strong = version foncée du niveau, pour le texte posé sur du BLANC (pilule « Je découvre »), qui exige 4,5:1 à 0,95rem. */ .kb-niveau{ --lvl:var(--kb-petrol);--lvl-ink:#fff;--lvl-strong:var(--lvl); position:relative;display:flex;flex-direction:column;align-items:center; gap:12px;text-align:center;text-decoration:none; background:linear-gradient(180deg,color-mix(in srgb,var(--lvl) 88%,#fff) 0%,var(--lvl) 100%); border-radius:var(--kb-r-lg);padding:26px 18px 22px; box-shadow:var(--kb-shadow);overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; } @supports not (background:color-mix(in srgb,red,blue)){ .kb-niveau{background:var(--lvl)} } .kb-niveau:hover{transform:translateY(-6px);box-shadow:var(--kb-shadow-hover)} .kb-niveau--gs{--lvl:var(--kb-gs)} /* blanc 6,9:1 ✓ */ .kb-niveau--cp{--lvl:var(--kb-cp);--lvl-ink:var(--kb-ink);--lvl-strong:#8A6400} /* encre 9,4:1 · pilule 5,4:1 */ .kb-niveau--ce1{--lvl:var(--kb-ce1);--lvl-ink:var(--kb-ink);--lvl-strong:#A85400} /* encre 5,7:1 · pilule 5,3:1 */ .kb-niveau--ce2{--lvl:var(--kb-ce2);--lvl-strong:#5B3FD6} /* blanc 3,5:1 (grand texte) · pilule 6,7:1 */ .kb-niveau--cm1{--lvl:var(--kb-cm1);--lvl-ink:var(--kb-ink);--lvl-strong:#23803A} /* encre 4,9:1 · pilule 5,0:1 */ .kb-niveau--cm2{--lvl:var(--kb-cm2)} /* blanc 4,6:1 ✓ · pilule 5,8:1 ✓ */ .kb-niveau-img{width:118px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18)); transition:transform .25s ease;animation:kb-float 6s ease-in-out infinite} .kb-niveau:hover .kb-niveau-img{transform:rotate(-4deg) scale(1.04)} .kb-niveau-nom{font-family:var(--kb-font-title);font-weight:800;font-size:1.3rem;color:var(--lvl-ink)} /* Pastille « GS · CP… » : 13 px ⇒ texte normal ⇒ seuil 4,5:1. Sur les niveaux à encre blanche on ASSOMBRIT la pastille (une pastille blanche translucide éclaircissait le fond et tombait à 2,0–4,1:1). */ .kb-niveau-classe{display:inline-block;font-family:var(--kb-font-title);font-weight:700;font-size:.82rem; color:var(--lvl-ink);background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.32); padding:3px 14px;border-radius:var(--kb-r-pill)} .kb-niveau--cp .kb-niveau-classe, .kb-niveau--ce1 .kb-niveau-classe, .kb-niveau--cm1 .kb-niveau-classe{background:rgba(23,50,59,.1);border-color:rgba(23,50,59,.18)} .kb-niveau-action{display:inline-flex;align-items:center;gap:.4em;margin-top:4px; font-family:var(--kb-font-title);font-weight:700;font-size:.95rem; color:var(--lvl-strong);background:#fff;padding:9px 20px;border-radius:var(--kb-r-pill); box-shadow:0 6px 14px rgba(0,0,0,.12);transition:transform .15s ease} .kb-niveau:hover .kb-niveau-action{transform:translateY(-2px)} /* Grille des 6 niveaux */ .kb-niveaux-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px} @media (max-width:1080px){.kb-niveaux-grid{grid-template-columns:repeat(3,1fr)}} /* ======================= 10. BANDEAU DE CONFIANCE ========================= */ /* N'y placer QUE des affirmations déjà présentes sur la page d'origine. */ .kb-trust{ background:#fff;border-radius:var(--kb-r);box-shadow:var(--kb-shadow); display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:14px 40px;padding:18px 28px; } .kb-trust-item{display:flex;align-items:center;gap:10px; font-family:var(--kb-font-title);font-weight:700;font-size:.95rem;color:var(--kb-petrol)} .kb-trust-item .kb-trust-ico{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;background:var(--kb-cream); border:2px solid rgba(13,76,92,.12);font-size:1rem;flex:none} /* ========================= 11. ÉTAPES NUMÉROTÉES ========================== */ .kb-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:kb-step} .kb-etape{position:relative;background:#fff;border-radius:var(--kb-r);box-shadow:var(--kb-shadow); padding:34px 20px 24px;text-align:center;transition:transform .2s ease,box-shadow .2s ease} .kb-etape:hover{transform:translateY(-6px);box-shadow:var(--kb-shadow-hover)} .kb-etape-num{counter-increment:kb-step;position:absolute;top:-20px;left:50%;transform:translateX(-50%); width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--kb-font-title);font-weight:800;font-size:1.2rem;color:#fff; box-shadow:0 8px 16px rgba(23,50,59,.18);border:3px solid #fff} .kb-etape-num::before{content:counter(kb-step)} /* Pastilles colorées 1-2-3-4 */ .kb-etape:nth-child(1) .kb-etape-num{background:var(--kb-accent)} .kb-etape:nth-child(2) .kb-etape-num{background:var(--kb-ce1)} .kb-etape:nth-child(3) .kb-etape-num{background:var(--kb-ce2)} .kb-etape:nth-child(4) .kb-etape-num{background:var(--kb-cm1)} .kb-etape:nth-child(2) .kb-etape-num{color:#fff} .kb-etape-titre{font-family:var(--kb-font-title);font-weight:800;font-size:1.08rem;color:var(--kb-petrol);margin:0 0 6px} .kb-etape-texte{margin:0;color:var(--kb-muted);font-size:.95rem} /* ========================= 12. CARTE TARIF PREMIUM ======================== */ .kb-tarif{ position:relative;background:#fff;border-radius:var(--kb-r-lg); box-shadow:var(--kb-shadow-hover);border:3px solid var(--kb-accent); padding:40px 32px 32px;max-width:440px;margin:0 auto;text-align:center; } .kb-tarif-flag{position:absolute;top:-18px;left:50%;transform:translateX(-50%); background:var(--kb-accent-text);color:#fff;font-family:var(--kb-font-title);font-weight:700; font-size:.85rem;padding:7px 20px;border-radius:var(--kb-r-pill);white-space:nowrap; /* 13,6 px ⇒ rose foncé, 5,87:1 */ box-shadow:var(--kb-shadow-cta)} .kb-tarif-prix{font-family:var(--kb-font-title);font-weight:800;color:var(--kb-petrol); font-size:3.4rem;line-height:1;margin:10px 0 2px} .kb-tarif-prix small{font-size:1.15rem;font-weight:700;color:var(--kb-muted)} .kb-tarif-note{color:var(--kb-muted);font-size:.92rem;margin:0 0 18px} .kb-tarif-liste{list-style:none;margin:0 0 24px;padding:0;text-align:left;display:grid;gap:10px} .kb-tarif-liste li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem} .kb-tarif-liste li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%; background:rgba(54,178,74,.14);color:var(--kb-cm1);font-weight:800;font-size:.8rem; display:inline-flex;align-items:center;justify-content:center;margin-top:2px} /* ============================ 13. CARTES AVIS ============================= */ /* Uniquement les avis déjà présents sur la page d'origine, mot pour mot. */ .kb-avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .kb-avis{background:#fff;border-radius:var(--kb-r);box-shadow:var(--kb-shadow); padding:26px 24px;display:flex;flex-direction:column;gap:12px; transition:transform .2s ease,box-shadow .2s ease} .kb-avis:hover{transform:translateY(-4px);box-shadow:var(--kb-shadow-hover)} .kb-avis-stars{color:#FFB300;letter-spacing:3px;font-size:1rem} .kb-avis-texte{margin:0;font-size:.98rem;color:var(--kb-ink)} .kb-avis-auteur{margin:0;font-family:var(--kb-font-title);font-weight:700; font-size:.9rem;color:var(--kb-muted)} .kb-avis-auteur::before{content:"— "} /* ====================== 14. CARROUSEL SCROLL-SNAP ========================= */ .kb-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory; padding:6px 4px 22px;-webkit-overflow-scrolling:touch;scrollbar-width:thin; scrollbar-color:rgba(13,76,92,.25) transparent} .kb-carousel>*{scroll-snap-align:start;flex:0 0 auto} .kb-carousel--peek>*{flex-basis:min(300px,78vw)} /* laisse deviner la carte suivante */ .kb-carousel::-webkit-scrollbar{height:8px} .kb-carousel::-webkit-scrollbar-thumb{background:rgba(13,76,92,.22);border-radius:8px} /* ============================== 15. FOOTER ================================ */ .kb-footer,footer.footer{background:var(--kb-petrol);color:#EAF4F6} .kb-footer a,footer.footer a{color:#EAF4F6} .kb-footer-inner{max-width:var(--kb-maxw);margin:0 auto;padding:56px 22px 28px; display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} .kb-footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px} .kb-footer-brand img{width:38px;height:38px;border-radius:10px} .kb-footer-brand span{font-family:var(--kb-font-title);font-weight:800;font-size:1.3rem;color:#fff} .kb-footer-baseline{color:rgba(234,244,246,.75);font-size:.95rem;max-width:280px} .kb-footer-col-titre{display:block;font-family:var(--kb-font-title);font-weight:700; font-size:1rem;color:#fff;margin-bottom:12px} .kb-footer-links{list-style:none;margin:0;padding:0;display:grid;gap:9px} .kb-footer-links a{text-decoration:none;opacity:.82;font-size:.95rem;transition:opacity .15s} .kb-footer-links a:hover{opacity:1;text-decoration:underline} .kb-footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:8px} .kb-footer-bottom-inner{max-width:var(--kb-maxw);margin:0 auto;padding:18px 22px; display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between; font-size:.88rem;color:rgba(234,244,246,.7)} /* ============================ 16. ANIMATIONS ============================== */ /* Uniquement transform / opacity (perf). */ @keyframes kb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes kb-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .kb-float{animation:kb-float 6s ease-in-out infinite} .kb-float--d1{animation-delay:.7s}.kb-float--d2{animation-delay:1.4s} .kb-float--d3{animation-delay:2.1s}.kb-float--d4{animation-delay:2.8s} .kb-float--d5{animation-delay:3.5s} /* Apparition douce (compatible avec le .reveal existant du site) */ /* SÉCURITÉ : le contenu est visible par défaut. Il n'est masqué que si le JS tourne vraiment (). Sans JS — ou pour un robot qui ne scrolle pas — la page reste entièrement lisible au lieu d'être vide. */ .reveal{opacity:1;transform:none} .kb-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease} .reveal.in,.reveal.visible,.kb-js .reveal.in,.kb-js .reveal.visible{opacity:1;transform:none} .kb-pop{animation:kb-pop .5s ease both} /* Bouton "revenir en haut" (compat) */ .to-top{position:fixed;right:18px;bottom:18px;z-index:70;width:48px;height:48px; border-radius:50%;border:0;cursor:pointer;background:var(--kb-accent-text);color:#fff; font-size:1.2rem;box-shadow:var(--kb-shadow-cta);opacity:0;pointer-events:none; /* flèche 19,2 px ⇒ rose foncé, 5,87:1 */ transform:translateY(8px);transition:opacity .2s,transform .2s} .to-top.show{opacity:1;pointer-events:auto;transform:none} /* Barre de progression de défilement (compat) */ .scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:120; background:linear-gradient(90deg,var(--kb-cp),var(--kb-accent));transition:width .08s linear} /* ========================= 17. RESPONSIVE MOBILE ========================== */ @media (max-width:960px){ .kb-etapes{grid-template-columns:repeat(2,1fr);row-gap:34px} .kb-avis-grid{grid-template-columns:repeat(2,1fr)} .kb-footer-inner{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .section{padding:var(--kb-sp-5) 0} .kb-niveaux-grid{grid-template-columns:repeat(2,1fr);gap:14px} .kb-etapes{grid-template-columns:1fr;row-gap:34px} .kb-avis-grid{grid-template-columns:1fr} .kb-footer-inner{grid-template-columns:1fr;gap:26px;padding:44px 22px 22px} .kb-trust{gap:12px 22px;padding:16px 18px} /* Menu mobile : burger + panneau déroulant */ .burger{display:flex} .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column; background:#fff;padding:18px 22px 22px;gap:16px;box-shadow:0 18px 30px -18px rgba(23,50,59,.3); display:none;border-radius:0 0 var(--kb-r) var(--kb-r)} .nav-links.open{display:flex} .kb-btn--lg,.btn-lg{width:100%;justify-content:center} } @media (max-width:460px){ .kb-niveaux-grid{grid-template-columns:1fr 1fr} .kb-niveau-img{width:92px} } /* ====================== 18. ACCESSIBILITÉ / MOUVEMENT ===================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} .reveal{opacity:1;transform:none} } /* ── Mot-marque multicolore (logo v2) — dégradé clippé, zéro balise ── */ .kb-wm{font-family:var(--kb-font-title,'Baloo 2');font-weight:800;letter-spacing:.5px;color:var(--kb-petrol,#17323B)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .kb-wm{background:linear-gradient(90deg,#FF7A1A 0 14%,#F03D7C 14% 20%,#57A639 20% 33%, #19B4D1 33% 39%,#EF4056 39% 52%,#F8B500 52% 67%,#7B61FF 67% 82%,#2D6FE0 82% 100%); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}} /* logo complet (mascottes) dans le pied de page */ .kb-footlogo{display:block;width:min(240px,70%);height:auto;background:#fff;border-radius:18px; padding:10px 14px;margin:0 0 14px;box-shadow:0 8px 22px rgba(0,0,0,.18)} /* ========================================================================== 19. PAGES PRODUITS & OFFRES — COUCHE PREMIUM (mission 3) Composants partagés par cahier-*.html, mega-cahier, ma-super-annee, cahiers-1950, malo-lila, pense-betes, jeu et les offre-*.html. Aucune de ces règles ne crée de contenu : elles habillent l'existant. ========================================================================== */ /* ---- 19.1 Carrousel d'aperçus (couvertures / pages intérieures) ---------- */ /* .kb-carousel donne déjà le scroll-snap ; --zoom ajoute le survol doux. */ .kb-carousel--zoom>*{transition:transform .25s ease,box-shadow .25s ease} .kb-carousel--zoom img{transition:transform .4s cubic-bezier(.2,.7,.3,1)} .kb-carousel--zoom>*:hover{transform:translateY(-6px)} .kb-carousel--zoom>*:hover img{transform:scale(1.055)} /* Le média garde son cadre : le zoom se fait à l'intérieur. */ .kb-carousel--zoom .kb-shot{overflow:hidden;border-radius:var(--kb-r);line-height:0;background:var(--kb-cream)} /* Indice de défilement discret, sous un carrousel */ .kb-swipe{display:flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--kb-font-title);font-weight:700;font-size:.88rem;color:var(--kb-muted);margin-top:2px} .kb-swipe::before{content:"";width:26px;height:3px;border-radius:3px;background:rgba(23,50,59,.16)} .kb-swipe::after{content:"";width:26px;height:3px;border-radius:3px;background:rgba(23,50,59,.16)} /* ---- 19.2 Bloc d'achat premium ------------------------------------------ */ /* Prix très visible, bénéfices à coches, bouton principal évident. */ .kb-achat{ background:linear-gradient(168deg,#fff 0%,var(--kb-cream) 100%); border:2px solid rgba(23,50,59,.09);border-radius:var(--kb-r-lg); padding:22px 24px;box-shadow:0 14px 32px -22px rgba(23,50,59,.6); } .kb-achat-prix{ display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap; font-family:var(--kb-font-title);font-weight:800;line-height:1; font-size:clamp(2.1rem,5.2vw,2.7rem);color:var(--kb-petrol);margin:0 0 4px; } .kb-achat-prix small,.kb-achat-prix .kb-achat-unite{ font-family:var(--kb-font-body);font-weight:800;font-size:.42em;color:var(--kb-muted)} .kb-achat-note{margin:0;color:var(--kb-muted);font-size:.92rem;font-weight:700} .kb-achat-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} .kb-achat-cta>a{flex:1 1 220px;justify-content:center} /* ---- 19.3 Bandeau de réassurance produit -------------------------------- */ .kb-reassure{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px} .kb-reassure>*{ display:inline-flex;align-items:center;gap:.45em;background:#fff; border:2px solid rgba(23,50,59,.08);border-radius:var(--kb-r-pill); padding:9px 18px;font-family:var(--kb-font-title);font-weight:700; font-size:.92rem;color:var(--kb-petrol);box-shadow:0 6px 16px -10px rgba(23,50,59,.5)} /* ---- 19.4 Hero de cahier (mascotte en grand + dégradé du niveau) --------- */ /* --kb-lvl / --kb-lvl-deep : couleur du monde ; --kb-lvl-soft : voile clair */ .kb-hero-cahier{ --kb-lvl:var(--kb-petrol);--kb-lvl-deep:var(--kb-petrol-deep);--kb-lvl-soft:#F2F7F9; display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:center; } .kb-hero-cahier-art{position:relative;display:flex;justify-content:center;align-items:center} .kb-hero-cahier-art::before{ content:"";position:absolute;width:96%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--kb-lvl) 34%,#fff) 0%,transparent 68%); z-index:0;pointer-events:none} .kb-hero-cahier-masc{ position:relative;z-index:1;width:min(230px,64vw);height:auto;border-radius:26px; box-shadow:0 26px 48px -22px rgba(0,0,0,.5),0 0 0 5px rgba(255,255,255,.9); } @media (max-width:720px){ .kb-hero-cahier{grid-template-columns:1fr;gap:16px;text-align:center} .kb-hero-cahier-art{order:-1} .kb-hero-cahier-masc{width:min(190px,54vw)} } /* ---- 19.5 Petites puces d'info (défis, diplôme…) ------------------------ */ .kb-chips{display:flex;flex-wrap:wrap;gap:9px} .kb-chips>*{display:inline-flex;align-items:center;gap:.4em; background:rgba(255,255,255,.9);border:2px solid rgba(23,50,59,.08); border-radius:var(--kb-r-pill);padding:6px 14px; font-family:var(--kb-font-title);font-weight:700;font-size:.85rem;color:var(--kb-petrol)} /* ---- 19.6 Mouvement réduit ---------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .kb-carousel--zoom>*:hover,.kb-carousel--zoom>*:hover img{transform:none} } /* ========================================================================== 20. MICRO-INTERACTIONS CTA (passe émotion) Le « toucher » des boutons : hover -2px (déjà en place), appui enfoncé, flèche qui glisse. Transform/opacity uniquement. ========================================================================== */ /* Appui « pressé » des petites pilules d'action (.btn/.kb-btn l'ont en §6). */ .btn-mini:active,.btn-amz:active{transform:translateY(1px) scale(.98)} /* Le « › » des boutons produit (.btn-amz) et collections (.cc-btn) glisse de 3px au survol — le chevron est enveloppé dans . */ .btn-amz .arr,.cc-btn .arr{display:inline-block;transition:transform .18s ease} .btn-amz:hover .arr,.coll-card:hover .cc-btn .arr{transform:translateX(3px)} @media (prefers-reduced-motion:reduce){ .btn-amz:hover .arr,.coll-card:hover .cc-btn .arr{transform:none} } /* ========================================================================== 21. LES GUIDES — les mascottes deviennent les hôtes du site Une mascotte (guide-*.webp) + une bulle de dialogue blanche : chaque section clé est accueillie par la voix de son monde. Texte AJOUTÉ uniquement, aucune promesse commerciale dans les bulles. Animations transform/opacity ; §18 neutralise tout en mouvement réduit. ========================================================================== */ .kb-guide{display:flex;align-items:flex-end;justify-content:center; margin:2px auto 26px;padding:0 16px;pointer-events:none} .kb-guide-img{width:104px;height:auto;flex:0 0 auto; filter:drop-shadow(0 12px 14px rgba(23,50,59,.20))} .kb-guide .kb-guide-bulle{position:relative;margin:0 0 34px 14px;max-width:300px; background:#fff;border:2px solid rgba(23,50,59,.07); border-radius:18px 18px 18px 6px;padding:11px 16px 12px;text-align:left; font-family:var(--kb-font-body,'Nunito');font-weight:700;font-size:1rem; line-height:1.4;color:var(--kb-ink);box-shadow:var(--kb-shadow)} .kb-guide .kb-guide-bulle::before{content:"";position:absolute;left:-9px;bottom:12px; width:14px;height:14px;background:#fff; border-left:2px solid rgba(23,50,59,.07);border-bottom:2px solid rgba(23,50,59,.07); border-radius:0 0 0 4px;transform:skewY(24deg) rotate(45deg)} .kb-guide-nom{display:block;font-family:var(--kb-font-title,'Baloo 2'); font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase; color:var(--gc,var(--kb-petrol));margin:0 0 2px} /* Couleur du prénom : variantes AA (≥4,5:1 sur blanc) de chaque monde */ .kb-guide--gs {--gc:#0D4C5C}.kb-guide--cp {--gc:#8A5A00} .kb-guide--ce1{--gc:#B65200}.kb-guide--ce2{--gc:#5B45D6} .kb-guide--cm1{--gc:#1E7F32}.kb-guide--cm2{--gc:#1B51AF} /* Sur carte sombre : le sol peint de la découpe devient un rond de lumière */ .kb-guide--dark .kb-guide-img{background:radial-gradient(closest-side,rgba(255,255,255,.30),rgba(255,255,255,0) 74%) no-repeat 50% 100%/96% 30%;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))} /* Apparition « pop » (pages sans .reveal, ou guide invoqué au clic) */ @keyframes kb-guide-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} .kb-guide--pop{animation:kb-guide-pop .25s cubic-bezier(.34,1.4,.44,1) both; transform-origin:50% 100%} @media (max-width:640px){ .kb-guide-img{width:88px} .kb-guide .kb-guide-bulle{max-width:240px;font-size:.94rem;margin-bottom:26px} } /* — La mascotte découpée sur son halo (couvertures, histoires, diplômes) — Remplace l'ancien rectangle-portrait ombré : plus de boîte dans la boîte, le personnage se tient sur un rond de lumière aux couleurs de son monde. */ .kb-masc-halo{position:relative;display:flex;align-items:flex-end; justify-content:center;margin:0 auto;line-height:0} .kb-masc-halo::before{content:"";position:absolute;left:50%;bottom:0; width:100%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,var(--hc,#E9F3F6) 58%,rgba(255,255,255,0) 100%)} .kb-masc-halo img{position:relative;z-index:1;width:100%;height:auto; filter:drop-shadow(0 12px 14px rgba(23,50,59,.22))} .kb-masc-halo--gs {--hc:#DCEDF2}.kb-masc-halo--cp {--hc:#FFEFC4} .kb-masc-halo--ce1{--hc:#FFE8D1}.kb-masc-halo--ce2{--hc:#EAE5FF} .kb-masc-halo--cm1{--hc:#DFF3E3}.kb-masc-halo--cm2{--hc:#DFEAFB} /* — Bulle d'accueil posée sous un personnage (couvertures des Grands Voyages) — */ .kb-bulle-haut{position:relative;display:inline-block;background:#fff; border:2px solid rgba(23,50,59,.07);border-radius:16px;padding:9px 15px; max-width:250px;text-align:left;font-family:var(--kb-font-body,'Nunito'); font-weight:700;font-size:.95rem;line-height:1.35;color:var(--kb-ink); box-shadow:var(--kb-shadow)} .kb-bulle-haut::before{content:"";position:absolute;top:-8px;left:50%; width:13px;height:13px;background:#fff; border-top:2px solid rgba(23,50,59,.07);border-left:2px solid rgba(23,50,59,.07); transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0} /* Sur la couverture des cahiers-mondes : pincée au bas du portrait */ .kb-cover-art .kb-bulle-haut{position:absolute;z-index:2;bottom:-10px;left:50%; transform:translateX(-50%);width:max-content;max-width:240px}