/* /commun/dinos-ce1.css — la couveuse et le dino-parc du CE1 (voir dinos-ce1.js).
   Couleurs de la charte (bleu nuit, or) et vert de la planète CE1. Gros boutons : enfants de 7 ans. */
.dn-couv-tete,.dn-parc-tete{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px}
.dn-couv-tete b,.dn-parc-tete b{font-family:"Baloo 2",Quicksand,sans-serif;font-size:26px;line-height:1.1;color:#1F1D5C}
.dn-couv-tete span{color:#4B4A7A;font-size:16px}
.dn-aide{background:#fff;border-radius:16px;padding:12px 14px;margin:8px 0;color:#4B4A7A;box-shadow:0 3px 0 #DFE2F6}
.dn-jauge{height:14px;border-radius:999px;background:#E6E8F7;overflow:hidden}
.dn-jauge span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4CC27A,#2EC4C9)}

/* les deux œufs */
.dn-oeufs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dn-oeuf{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:24px;padding:16px 10px 14px;cursor:pointer;
  background:#fff;color:#1F1D5C;font:inherit;box-shadow:0 6px 0 #DFE2F6,0 12px 24px rgba(31,29,92,.1);border-top:8px solid #4CC27A;transition:transform .12s}
.dn-oeuf.dore{border-top-color:#F5B301}
.dn-oeuf:hover{transform:translateY(-3px)}
.dn-oeuf:active{transform:translateY(3px)}
.dn-oeuf-svg{width:96px;height:116px;display:block}
.dn-oeuf-svg svg{width:100%;height:100%}
.dn-oeuf:not(.ferme):not(.pauvre) .dn-oeuf-svg{animation:dn-dandine 2.4s ease-in-out infinite}
.dn-oeuf b{font-family:"Baloo 2",Quicksand,sans-serif;font-size:20px}
.dn-oeuf small{color:#4B4A7A;font-size:14px}
.dn-prix{font-weight:700;font-size:20px;color:#7A4E00}
.dn-oeuf.pauvre{opacity:.75}
.dn-oeuf.ferme{opacity:.55;cursor:default;filter:grayscale(.6)}
.dn-msg{min-height:1.4em;margin:12px 2px;font-weight:700;color:#C2410C}
@keyframes dn-dandine{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}}

/* l'éclosion */
.dn-scene{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0 20px}
.dn-consigne{font-family:"Baloo 2",Quicksand,sans-serif;font-size:22px;color:#1F1D5C;text-align:center;margin:0}
.dn-eclosion{border:0;background:none;cursor:pointer;width:200px;height:240px;padding:0}
.dn-eclosion svg{width:100%;height:100%}
.dn-eclosion.secoue{animation:dn-secoue .35s ease-in-out}
@keyframes dn-secoue{25%{transform:rotate(-10deg) scale(1.04)}50%{transform:rotate(9deg)}75%{transform:rotate(-5deg)}}
.dn-revele{position:relative;overflow:hidden;text-align:center;background:#fff;border-radius:26px;padding:18px 16px 20px;
  box-shadow:0 6px 0 #DFE2F6,0 14px 30px rgba(31,29,92,.12);border-top:10px solid #4CC27A}
.dn-revele.r2{border-top-color:#5B8CFF}
.dn-revele.r3{border-top-color:#F5B301;background:linear-gradient(180deg,#FFF8DB,#fff 45%)}
.dn-revele-img{animation:dn-sort .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes dn-sort{from{transform:scale(.2) translateY(40px);opacity:0}to{transform:none;opacity:1}}
.dn-revele h2,.dn-fiche h2{font-family:"Baloo 2",Quicksand,sans-serif;font-size:32px;margin:4px 0;color:#1F1D5C}
.dn-rarete{margin:0;font-weight:700;color:#7A4E00;letter-spacing:.5px}
.dn-fait{font-size:19px;line-height:1.45;color:#1F1D5C;max-width:520px;margin:6px auto 12px}
.dn-confettis{position:absolute;inset:0;pointer-events:none}
.dn-confettis i{position:absolute;top:-12px;width:10px;height:14px;border-radius:3px;animation:dn-tombe 1.6s ease-in forwards}
@keyframes dn-tombe{to{transform:translateY(420px) rotate(540deg);opacity:0}}

/* les images */
.dn-img{display:block;width:var(--t,96px);height:auto;max-width:100%;margin:0 auto;object-fit:contain;-webkit-user-drag:none;user-select:none}
.dn-img.cache{filter:brightness(0);opacity:.16}
.dn-revele .dn-img,.dn-fiche .dn-img{width:220px;max-width:70vw}

/* le parc */
.dn-epoque{font-family:"Baloo 2",Quicksand,sans-serif;font-size:22px;color:#1F1D5C;margin:18px 0 8px}
.dn-epoque small{font-family:Quicksand,sans-serif;font-size:15px;color:#4B4A7A}
.dn-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.dn-carte{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:18px;padding:10px 6px;background:#fff;
  font:inherit;color:#1F1D5C;cursor:pointer;box-shadow:0 4px 0 #DFE2F6;border-bottom:4px solid #4CC27A;min-height:150px}
.dn-carte.r2{border-bottom-color:#5B8CFF}
.dn-carte.r3{border-bottom-color:#F5B301;background:linear-gradient(180deg,#FFF8DB,#fff)}
.dn-carte.compagnon{outline:3px solid #4CC27A;outline-offset:2px}
.dn-carte.inconnu{cursor:default;background:#F1F2FA;border-bottom-color:#DFE2F6}
.dn-carte .dn-img{width:96px}
.dn-nom{font-weight:700;font-size:14px;line-height:1.15;text-align:center}
.dn-et{font-size:12px}

/* la fiche */
.dn-fond{position:fixed;inset:0;background:rgba(31,29,92,.55);display:grid;place-items:center;z-index:90;padding:14px}
.dn-fiche{position:relative;background:#fff;border-radius:26px;max-width:560px;width:100%;max-height:92vh;overflow:auto;box-sizing:border-box;
  padding:20px 18px 18px;text-align:center;border-top:10px solid #4CC27A}
.dn-fiche.r2{border-top-color:#5B8CFF}
.dn-fiche.r3{border-top-color:#F5B301}
.dn-infos{list-style:none;padding:0;margin:0 auto 12px;max-width:440px;text-align:left}
.dn-infos li{padding:8px 12px;border-radius:12px;background:#F4F5FD;margin:6px 0;font-size:17px}
.dn-fermer{position:absolute;top:10px;right:10px;border:0;background:#ECEEFB;border-radius:50%;width:44px;height:44px;font-size:18px;cursor:pointer}

/* boutons */
.dn-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.dn-bouton{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;border:0;border-radius:16px;padding:12px 20px;
  background:#2B8A3E;color:#fff;font:inherit;font-weight:700;font-size:18px;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 #1B5E29}
.dn-bouton.clair{background:#fff;color:#1F1D5C;box-shadow:0 4px 0 #DFE2F6;border:2px solid #DFE2F6}
.dn-bouton.fait{background:#1F1D5C;box-shadow:0 4px 0 #0E0D33}

@media (max-width:420px){
  .dn-oeufs{gap:10px}
  .dn-oeuf-svg{width:76px;height:92px}
  .dn-grille{grid-template-columns:repeat(3,1fr);gap:8px}
  .dn-carte{min-height:126px;padding:8px 4px}
  .dn-carte .dn-img{width:76px}
}
@media (prefers-reduced-motion:reduce){.dn-oeuf-svg,.dn-eclosion.secoue,.dn-revele-img,.dn-confettis i{animation:none !important}}

/* les derniers dinos éclos, dans la couveuse */
.dn-sous{margin:16px 2px 6px;font-weight:700;color:#4B4A7A}
.dn-derniers{display:flex;flex-wrap:wrap;gap:8px}
.dn-mini{border:0;border-radius:16px;background:#fff;padding:6px;cursor:pointer;box-shadow:0 3px 0 #DFE2F6;border-bottom:4px solid #4CC27A}
.dn-mini.r2{border-bottom-color:#5B8CFF}
.dn-mini.r3{border-bottom-color:#F5B301}
.dn-mini .dn-img{width:72px}
.dn-btns.gauche{justify-content:flex-start;margin:0 0 6px}