/* ============================================================
   LES PETITS GERMIS · complément de landing.css (fond enfants + écrans de jeu)
   Tout le reste (fond, menu, héros, cartes, boutons) vient de landing.css.
   ============================================================ */
:root{--ink:#17253a;--paper:#FBF8F2;--acc:var(--cr-gold)}
.pg{position:relative;z-index:2}
body.playing .hero{display:none}
body.playing .magicnav .cta{display:none}
.pg-sec-head{margin-bottom:22px}
.pg-sec-head h2{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.015em;margin:12px 0 0;text-wrap:balance}
.pg-sec-head h2 em{font-style:italic;background:linear-gradient(92deg,var(--cr-gold-200),var(--cr-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
.pg-sec-head .intro{max-width:78ch;color:rgba(255,255,255,.76);font-size:clamp(14.5px,1.15vw,17px);line-height:1.62;margin:16px 0 0}
.pg-sec-head .intro b{color:#fff}
.savoir .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.pf.pg-age{cursor:pointer;text-align:left;color:#fff;font-family:var(--font-body);display:flex;flex-direction:column;gap:8px}
.pf.pg-age::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc)}
.pf.pg-age .pg-age-label{font:800 11px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
.pf.pg-age .pg-age-titre{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(22px,1.9vw,30px);line-height:1.1;display:block}
.pf.pg-age > span{font-size:14px;color:rgba(255,255,255,.7);line-height:1.45}
.pf.pg-age .go{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:13px;color:var(--cr-gold-100)}
.pf.pg-age .go .ar{transition:transform .24s var(--e)}
.pf.pg-age:hover .go .ar{transform:translateX(4px)}
.pf.pg-fiche{display:flex;flex-direction:column;gap:8px;text-align:left}
.pf.pg-fiche b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(20px,1.7vw,26px);line-height:1.1;padding-right:70px}
.pf.pg-fiche span{font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}
.pg-soon{position:absolute;top:16px;right:16px;font:800 10px/1 var(--font-body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--cr-gold);border:1px solid var(--cr-gold);border-radius:999px;padding:4px 8px}
#fiches{padding-bottom:clamp(40px,6vh,80px)}

/* bandeau de navigation pendant le jeu */
.pg-crumbbar{display:flex;align-items:center;gap:10px;padding:96px 0 18px;font-family:var(--font-ui);font-size:14px;color:rgba(255,255,255,.66)}
.pg-crumbbar b{color:#fff}
.pg-link{background:none;border:0;color:var(--cr-gold-100);font-family:var(--font-ui);font-size:14px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.pg-steps{margin-left:auto;display:flex;gap:6px}
.pg-step{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-br);font-size:16px;opacity:.55}
.pg-step.on{opacity:1;border-color:var(--cr-gold);box-shadow:0 0 0 4px rgba(232,180,90,.22),0 0 24px -6px var(--halo-gold)}

/* boutons des écrans de jeu (mêmes formes que la landing) */
.pg-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:700;font-size:14px;padding:14px 24px;border-radius:var(--r-pill);text-decoration:none;border:1px solid transparent;background:var(--gf-red);color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 28px -10px var(--halo-red),0 0 24px -6px var(--halo-red);transition:background .24s var(--e),transform .24s var(--e)}
.pg-btn:hover{background:var(--gf-red-600);transform:translateY(-1px);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:default;transform:none}
.pg-btn.ghost{background:var(--glass);border-color:var(--glass-br);color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pg-btn.ghost:hover{background:var(--glass-2);border-color:rgba(255,255,255,.42)}
.pg-speak{margin-top:14px;padding:12px 18px;border-radius:var(--r-pill);border:1px solid var(--cr-gold);background:transparent;color:var(--gf-blue-800);font-family:var(--font-ui);font-weight:700;font-size:16px;cursor:pointer}
.pg-speak:hover{background:var(--cr-gold-100)}

/* histoires (carte papier sur fond nuit) */
.pg-story{display:grid;grid-template-columns:1.15fr 1fr;background:var(--paper);color:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);min-height:420px;font-family:var(--font-body)}
.pg-story-img{background:#e9e4d8 center/cover no-repeat;min-height:300px}
.pg-story-txt{padding:30px 30px 26px;display:flex;flex-direction:column;justify-content:center}
.pg-story-n{font:800 11px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--cr-gold);margin-bottom:10px}
.pg-story-txt h2{font-family:var(--font-display);font-size:clamp(26px,3.2vw,36px);font-style:italic;font-weight:800;color:var(--gf-blue-800);margin:0 0 12px;line-height:1.05}
.pg-story-txt p{font-size:19px;line-height:1.55;margin:0;color:#2b3542}
.pg-story-txt p.big{font-size:26px;line-height:1.4}
.pg-nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}

/* quiz */
.pg-quiz{background:var(--paper);color:var(--ink);border-radius:24px;padding:28px 30px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);font-family:var(--font-body)}
.pg-quiz-top{display:flex;justify-content:space-between;font-weight:800;color:#5d6b7a;margin-bottom:10px;font-family:var(--font-ui)}
.pg-seeds{font-size:20px;letter-spacing:2px}
.pg-quiz h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--gf-blue-800);margin:0;line-height:1.1}
.pg-opts{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.pg-opts.three{grid-template-columns:repeat(3,1fr)}
.pg-opts.two{grid-template-columns:repeat(2,1fr)}
.pg-opt{padding:18px 16px;border-radius:18px;border:3px solid #e9e4d8;background:#fff;font-size:19px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;transition:transform .12s,border-color .2s;font-family:var(--font-body)}
.pg-opts.three .pg-opt{text-align:center;font-size:22px;min-height:110px;display:grid;place-items:center}
.pg-opts.two .pg-opt{text-align:center;font-size:34px;min-height:170px;display:grid;place-items:center;line-height:1.2}
.pg-opt:hover{transform:translateY(-2px);border-color:var(--cr-gold)}
.pg-opt.ok{border-color:var(--mz-leaf);background:#eef8ec}
.pg-opt.ko{border-color:var(--gf-red);background:#fdeceb}
.pg-opt.off{opacity:.45}
.pg-expl{margin-top:16px;padding:16px 18px;border-radius:16px;background:#fff6e8;border:2px solid #f3d9a8;font-size:17px;line-height:1.5}
.pg-expl.ok{background:#eef8ec;border-color:#bfe0b9}
.pg-expl div{margin-top:12px}

/* jeux */
.pg-game{background:var(--paper);color:var(--ink);border-radius:24px;padding:26px 28px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);font-family:var(--font-body)}
.pg-game h2{font-family:var(--font-display);font-size:30px;font-style:italic;font-weight:800;color:var(--gf-blue-800);margin:0;line-height:1.1}
.pg-consigne{font-size:18px;color:#3f4b58;margin:6px 0 18px}
.pg-plant,.pg-bins{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.pg-bins{grid-template-columns:repeat(2,1fr)}
.pg-target,.pg-bin{border:3px dashed #d9e3ee;border-radius:22px;padding:18px;background:#f7fbf5;font-size:18px;font-weight:800;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,transform .12s;font-family:var(--font-body)}
.pg-target:hover,.pg-bin:hover{border-color:var(--cr-gold);transform:translateY(-2px)}
.pg-bin.non{background:#fbf5f5}
.pg-target-emoji{font-size:44px}
.pg-items{display:flex;flex-wrap:wrap;gap:10px}
.pg-item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;border:3px solid #e9e4d8;background:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:transform .12s,border-color .2s;font-family:var(--font-body);color:var(--ink)}
.pg-item.sel{border-color:var(--gf-red);background:#fff1f0;transform:scale(1.05)}
.pg-item-emoji{font-size:26px}
.age-t .pg-item{font-size:22px;padding:16px 22px}.age-t .pg-target,.age-t .pg-bin{font-size:22px}
.pg-memo{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.age-t .pg-memo{grid-template-columns:repeat(3,1fr)}
.pg-card{aspect-ratio:1;border-radius:20px;border:3px solid #e9e4d8;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s;font-family:var(--font-body);color:var(--ink)}
.pg-card.up{border-color:var(--cr-gold)}
.pg-card.found{border-color:var(--mz-leaf);background:#eef8ec}
.pg-card .pg-item-emoji{font-size:38px}

/* fin */
.pg-end{text-align:center;padding:30px 20px;font-family:var(--font-body)}
.pg-end h2{font-family:var(--font-display);font-size:clamp(26px,4vw,44px);font-style:italic;font-weight:800;margin:10px 0;line-height:1.05}
.pg-end p{font-size:18px;color:rgba(255,255,255,.76)}
.pg-game .pg-end p,.pg-quiz .pg-end p{color:#3f4b58}
.pg-end p.big{font-size:34px;letter-spacing:2px;line-height:1.3}
.pg-end.small{padding:18px 0 0}
.pg-end.small h3{font-family:var(--font-display);font-size:24px;font-style:italic;font-weight:800;color:var(--gf-blue-800);margin:6px 0 12px}
.pg-quiz .pg-end h2{color:var(--gf-blue-800)}
.pg-germis{display:inline-block;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.pg-teach-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.age-p .pg-opt,.age-t .pg-opt{font-size:20px}
.age-t .pg-story-txt h2{font-size:clamp(30px,3.6vw,42px)}
@media (max-width:980px){.pg-story{grid-template-columns:1fr}.pg-story-img{min-height:240px}}
@media (max-width:720px){.pg-opts.three,.pg-opts.two,.pg-plant{grid-template-columns:1fr}.pg-memo,.age-t .pg-memo{grid-template-columns:repeat(3,1fr)}.pg-steps{display:none}.pg-crumbbar{padding-top:84px}}

#grands .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* ---- Fond et ambiance propres aux enfants (l'illustration du potager à l'heure dorée) ---- */
.bg-kids .bg-photo{background-image:url("assets/petits-germis/fond-enfants.jpg");background-position:center 40%;opacity:.86;filter:saturate(1.02);transform-origin:70% 60%}
.bg-kids .bg-tint{background:radial-gradient(130% 100% at 50% 30%,rgba(7,17,29,.02),rgba(7,17,29,.34) 82%),linear-gradient(180deg,rgba(7,17,29,.12) 0%,rgba(7,17,29,.04) 38%,rgba(7,17,29,.46) 100%)}
.cosmos{background:radial-gradient(1400px 700px at 80% -10%,rgba(232,180,90,.22),transparent 60%),radial-gradient(1200px 800px at 10% 110%,rgba(109,187,60,.2),transparent 60%),radial-gradient(900px 600px at 50% 50%,rgba(232,180,90,.08),transparent 70%)}
.stage{background:radial-gradient(800px 400px at 70% 26%,rgba(232,180,90,.2),transparent 60%),radial-gradient(700px 500px at 24% 74%,rgba(109,187,60,.18),transparent 60%),linear-gradient(180deg,rgba(7,24,42,.16) 0%,rgba(3,16,28,.34) 100%)}
.stage-veil{background:linear-gradient(180deg,rgba(14,41,64,.08) 0%,rgba(14,41,64,.04) 40%,rgba(4,16,27,.36) 100%)}
.hero .eyebrow.gold{color:var(--cr-gold-100)}
.hero h1 em{background:linear-gradient(92deg,#F2D08C,#8FC758);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.magicnav{background:rgba(24,30,12,.5)}
@media (max-width:720px){.bg-kids .bg-photo{background-image:url("assets/petits-germis/fond-enfants-mobile.jpg");background-size:auto 64vh;background-position:78% 0;background-repeat:no-repeat}}
/* sections sur voile nuit (lisibilite sur le fond clair) */
.pg .proof .wrap,.pg .savoir .wrap{background:rgba(7,17,29,.66);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:clamp(22px,3vw,40px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.pg .proof,.pg .savoir{padding-top:clamp(18px,2.5vh,30px);padding-bottom:clamp(18px,2.5vh,30px)}
.pg-crumbbar{background:rgba(7,17,29,.6);border-radius:18px;padding:12px 18px;margin-top:90px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
footer .foot{background:rgba(7,17,29,.6);border-radius:22px;padding:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* sections statiques (SEO / lecture parents) : memes panneaux ; masquees pendant le jeu */
.pg-wrap-static{}
body.playing .seo-static{display:none}
.seo-static .wrap{background:rgba(7,17,29,.66);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:clamp(22px,3vw,40px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.seo-static{padding-top:clamp(18px,2.5vh,30px);padding-bottom:clamp(18px,2.5vh,30px)}

a.pf.pg-fiche{text-decoration:none;color:#fff;cursor:pointer}
a.pf.pg-fiche .go{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:13px;color:var(--cr-gold-100)}
a.pf.pg-fiche:hover .go .ar{transform:translateX(4px)}

/* ---- étapes cliquables du parcours (aussi sur téléphone, sur une seconde ligne) ---- */
button.pg-step{cursor:pointer;color:inherit;padding:0;font-family:inherit;transition:opacity .2s,border-color .2s}
button.pg-step:hover{opacity:.9;border-color:rgba(255,255,255,.5)}
@media (max-width:720px){.pg-crumbbar{flex-wrap:wrap;row-gap:10px}.pg-steps{display:flex;margin-left:0;width:100%;overflow-x:auto;gap:6px}.pg-step{width:32px;height:32px;font-size:15px;flex:0 0 auto}}

/* ---- vidéos (carte papier, deux films côte à côte, un par ligne sur téléphone) ---- */
.pg-videos{background:var(--paper);color:var(--ink);border-radius:24px;padding:26px 28px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);font-family:var(--font-body)}
.pg-media-head h2{font-family:var(--font-display);font-size:clamp(26px,3.2vw,36px);font-style:italic;font-weight:800;color:var(--gf-blue-800);margin:0 0 6px;line-height:1.05}
.pg-media-head p{margin:0 0 18px;color:#3f4b58;font-size:17px}
.pg-films{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pg-film{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.pg-film video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#0E1B2E;box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.pg-films>.pg-film:nth-child(3):last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 11px)}
.pg-films.vert{grid-template-columns:1fr;gap:28px}
.pg-films.vert>.pg-film:nth-child(3):last-child{width:auto;justify-self:stretch}
.pg-films.vert .pg-film video{aspect-ratio:9/16;max-width:min(100%,calc(80vh * 9 / 16));margin:0 auto}
.pg-films.vert .pg-film.pg-film-169 video{aspect-ratio:16/9;max-width:100%}
.pg-film figcaption{display:flex;flex-direction:column;gap:5px}
.pg-film figcaption span.pg-film-serie{font:800 11px/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:#a36d12}
.pg-film figcaption b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(20px,2vw,24px);color:var(--gf-blue-800);line-height:1.1}
.pg-film figcaption span{font-size:16px;line-height:1.45;color:#3f4b58}
.pg-film .pg-dl{font-size:13px;color:#5d6b7a;text-decoration:underline;text-underline-offset:3px;align-self:flex-start;margin-top:2px}
.pg-film .pg-dl:hover{color:var(--gf-blue-800)}
@media (max-width:980px){.pg-films{grid-template-columns:1fr}.pg-films>.pg-film:nth-child(3):last-child{width:auto;justify-self:stretch}}
@media (max-width:720px){.pg-videos{padding:20px 16px}}

/* ---- BD (même carte que les histoires) ---- */
.pg-bd a.pg-story-img{display:block;min-height:340px}
.pg-bd+.pg-bd{margin-top:22px}
.pg-acts-l{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pg-btn.ghost.dark{background:#fff;border-color:#d9e3ee;color:var(--gf-blue-800);-webkit-backdrop-filter:none;backdrop-filter:none}
.pg-btn.ghost.dark:hover{border-color:var(--cr-gold);background:#fffaf0;color:var(--gf-blue-800)}

/* ---- accueil : cartes « vidéos et BD » par âge ---- */
.pf.pg-mediacard{display:flex;flex-direction:column;gap:10px;text-align:left;color:#fff}
.pf.pg-mediacard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc)}
.pf.pg-mediacard .pg-age-label{font:800 11px/1.2 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.pg-mediacard-img{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;border:0;padding:0;background:#0E1B2E center/cover no-repeat;cursor:pointer;overflow:hidden;box-shadow:0 12px 26px -14px rgba(0,0,0,.7)}
.pg-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(225,37,27,.92);color:#fff;display:grid;place-items:center;font-size:18px;padding-left:3px;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .2s var(--e)}
.pg-mediacard-img:hover .pg-play{transform:translate(-50%,-50%) scale(1.08)}
/* 26/09/2026 : la règle « .pf span » de landing.css (position relative, bloc, marge, interligne) écrasait .pg-play :
   le rond descendait en bas de l'image et le triangle restait en haut du rond. On la neutralise ici, plus précisément. */
.pg-mediacard-img .pg-play{position:absolute;display:grid;place-items:center;left:50%;top:50%;margin:0;width:52px;height:52px;font-size:18px;line-height:1;padding:0 0 0 3px;color:#fff}
.pf.pg-mediacard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.35}
.pf.pg-mediacard small{color:rgba(255,255,255,.55);white-space:nowrap}
.pg-mediacard-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.pg-btn.sm{padding:10px 16px;font-size:13px}
/* 26/09/2026 : sur téléphone et tablette, le menu du haut occupe toute la largeur ; une rubrique atteinte par le menu
   (Les âges, Vidéos, Enseignants, Fiches) s'arrête sous le menu au lieu de passer dessous. */
@media (max-width:1080px){#ages,#videos,#enseignants,#grands,#fiches{scroll-margin-top:84px}}/* 26/09/2026 : fond animé (boucle vidéo tirée de fond-enfants.jpg), même rendu que l'image ; l'image reste affichée
   tant que la vidéo ne joue pas (et pour les « animations réduites »). Téléphone : bandeau cadré sur les Germis, comme l'image. */
.bg-kids .bg-video{object-position:center 40%;opacity:.86;filter:saturate(1.02)}
@media (max-width:760px){.bg-kids .bg-video{object-position:78% 50%}}
/* 27/09/2026 : carnet d'autocollants (avatars des Germis), un par étape terminée ; annonce en bas d'écran ; diplôme. */
.pg-sticker{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;vertical-align:middle;border-radius:24%;background:#fff;border:3px solid #fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.05);overflow:hidden;padding:3px;box-sizing:border-box}
.pg-sticker img{width:100%;height:100%;object-fit:contain;display:block}
.pg-sticker:not(.on){background:rgba(255,255,255,.07);border:2px dashed rgba(255,255,255,.38);box-shadow:none}
.pg-sticker-vide{font:800 22px var(--font-ui);color:rgba(255,255,255,.5)}
.pg-step.won{opacity:1;padding:0;border:0;background:none;overflow:visible}
.pg-step .pg-sticker{border-radius:50%;border-width:2px;padding:0;box-shadow:0 3px 8px -3px rgba(0,0,0,.6)}
.pg-step .pg-sticker img{object-fit:cover;object-position:center 12%;transform:scale(1.3)}
.pg-carnet{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;max-width:900px;margin:24px auto 8px}
.pg-carnet figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.pg-carnet figcaption{font:600 13px/1.25 var(--font-ui);color:rgba(255,255,255,.82);text-align:center}
.pg-carnet .pg-sticker.on{animation:pgColle .5s var(--e) both}
.pg-carnet figure:nth-child(2) .pg-sticker.on{animation-delay:.06s}.pg-carnet figure:nth-child(3) .pg-sticker.on{animation-delay:.12s}.pg-carnet figure:nth-child(4) .pg-sticker.on{animation-delay:.18s}.pg-carnet figure:nth-child(5) .pg-sticker.on{animation-delay:.24s}.pg-carnet figure:nth-child(6) .pg-sticker.on{animation-delay:.3s}.pg-carnet figure:nth-child(7) .pg-sticker.on{animation-delay:.36s}
@keyframes pgColle{from{transform:scale(.55) rotate(-9deg);opacity:0}to{transform:none;opacity:1}}
.pg-diplome{margin:20px 0 8px}
.pg-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border-radius:22px;background:#fffdf7;color:var(--gf-blue-800);box-shadow:0 20px 44px -12px rgba(0,0,0,.6);font-family:var(--font-ui);cursor:pointer;animation:pgToast .45s var(--e) both;max-width:calc(100vw - 32px);box-sizing:border-box}
.pg-toast .pg-sticker{box-shadow:0 6px 14px -6px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}
.pg-toast b{display:block;font:800 21px/1.1 var(--font-display);color:var(--gf-red)}
.pg-toast span{display:block;font-weight:700;font-size:15px;margin-top:3px}
.pg-toast small{display:block;font-size:13px;color:#5b6573;margin-top:2px}
@keyframes pgToast{from{transform:translate(-50%,30px) scale(.9);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (max-width:720px){.pg-carnet{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
@media (prefers-reduced-motion:reduce){.pg-toast,.pg-carnet .pg-sticker.on{animation:none}}
/* 27/09 : memory des 3-5 ans, les 6 cartes tiennent dans l'écran sans défiler, images plus grandes (taille relative à la carte) */
.age-t .pg-memo{max-width:max(300px,min(100%,calc(150vh - 410px)));margin-inline:auto}
.age-t .pg-card{container-type:inline-size}
.age-t .pg-card .pg-item-emoji{font-size:clamp(38px,40cqi,110px);line-height:1.1}
.age-t .pg-card.up>span:not(.pg-item-emoji){font-size:clamp(15px,9cqi,22px)}
.age-t .pg-card .pg-germis{height:clamp(44px,46cqi,130px)!important}
@media (max-width:720px) and (min-height:800px){.age-t .pg-memo{grid-template-columns:repeat(2,1fr);max-width:max(220px,min(100%,calc(66.6vh - 202px)))}}
/* 27/09 : icônes SVG des étapes (Lucide), centrées au pixel dans les ronds ; sur téléphone, le halo de l'étape en cours n'est plus coupé par la zone de défilement */
.pg-step{color:#f7f1e3}
.pg-step .pg-ico{display:block;flex:none}
.pg-step.on{color:var(--cr-gold)}
@media (max-width:720px){.pg-steps{padding:6px;margin:-6px;width:calc(100% + 12px)}.pg-step.on{box-shadow:0 0 0 3px rgba(232,180,90,.25)}.pg-step .pg-ico{width:17px;height:17px}}
.pg-ico.in{display:inline-block;flex:none;vertical-align:-.2em;margin-right:.45em}
.pg-mediacard li .pg-ico.in{opacity:.8}
/* 28/09 : carnet complet (7 sur 7), la notification reste affichée avec le bouton du diplôme ; raccourci « diplôme » en fin de barre des étapes */
/* largeur du contenu (bornée à l'écran) : avec left:50%, la notification se tassait sur la moitié de l'écran des téléphones */
.pg-toast{width:-webkit-max-content;width:max-content}
.pg-toast.complet{cursor:default;align-items:flex-start;padding:14px 18px 14px 14px}
.pg-toast .pg-toast-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pg-toast .pg-toast-acts .pg-btn{font-size:13px}
.pg-step.pg-step-diplome{opacity:1;color:var(--cr-gold);border-color:rgba(232,180,90,.65)}