/* L'école de Sib' : charte graphique (Nova). Tout écran du jeu part de ces jetons et de ces composants.
   Patte Sib' : papier découpé au soleil, carmin et or, la sphère armillaire à étoile comme emblème. */
:root {
  /* couleurs */
  --papier: #FFF6E9; --papier-2: #FFEBD2; --papier-3: #FBDDB8; --blanc: #FFFFFF;
  --encre: #2B2140; --encre-2: rgba(43, 33, 64, .66); --encre-3: rgba(43, 33, 64, .14);
  --carmin: #B3123A; --carmin-2: #8C0C2C; --carmin-clair: #F7D3DC;
  --or: #F2B632; --or-2: #D99A1E; --or-clair: #FFE9A8;
  --nombres: #FFB703; --formes: #2EC4B6; --logique: #7B5CFF; --lettres: #FF6B6B; --decouvertes: #6BCB77;
  --monde: var(--lettres);                       /* couleur du monde courant : à poser sur l'écran du jeu */
  /* formes */
  --r-1: 12px; --r-2: 20px; --r-3: 32px; --r-rond: 999px;
  --ombre-1: 0 2px 0 rgba(43, 33, 64, .08), 0 6px 14px -6px rgba(43, 33, 64, .25);
  --ombre-2: 0 3px 0 rgba(43, 33, 64, .10), 0 16px 30px -12px rgba(43, 33, 64, .35);
  --ombre-papier: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -3px 0 rgba(43, 33, 64, .07) inset;
  /* typographie */
  --police: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  --t-geant: clamp(44px, 11vmin, 96px); --t-titre: clamp(26px, 6vmin, 44px); --t-corps: clamp(16px, 2.6vmin, 22px); --t-petit: clamp(13px, 2vmin, 16px);
  /* mouvement */
  --rebond: cubic-bezier(.3, 1.6, .5, 1); --doux: cubic-bezier(.3, .7, .2, 1);
  --vite: .12s; --moyen: .26s; --lent: .5s;
  /* ergonomie */
  --cible: 64px; --ecart: 16px;
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px); --gauche: env(safe-area-inset-left, 0px); --droite: env(safe-area-inset-right, 0px);
}
[data-profil="petite"] { --cible: 76px; --ecart: 20px; }
[data-monde="nombres"] { --monde: var(--nombres); } [data-monde="formes"] { --monde: var(--formes); } [data-monde="logique"] { --monde: var(--logique); }
[data-monde="lettres"] { --monde: var(--lettres); } [data-monde="decouvertes"] { --monde: var(--decouvertes); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--police); font-size: var(--t-corps); font-weight: 700; color: var(--encre); background: var(--papier);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }

/* Le décor : ciel de papier, soleil, collines découpées en trois plans. Poser <div class="decor"> en fond d'écran ;
   --px et --py (de -1 à 1) déplacent les plans en parallaxe. */
.decor { position: absolute; inset: 0; overflow: hidden; z-index: 0; --px: 0; --py: 0;
  background: radial-gradient(120% 70% at 78% 8%, #FFE7B8 0, transparent 55%), linear-gradient(#FFF9F0, var(--papier) 45%, var(--papier-2)); }
.decor::before { /* grain du papier */ content: ""; position: absolute; inset: -20px; opacity: .5; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.decor-soleil { position: absolute; right: 9%; top: 7%; width: clamp(70px, 16vmin, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFE08A, var(--or) 70%); box-shadow: 0 0 0 clamp(10px, 2.4vmin, 22px) rgba(242, 182, 50, .18), 0 0 0 clamp(22px, 5vmin, 48px) rgba(242, 182, 50, .09);
  translate: calc(var(--px) * -6px) calc(var(--py) * -4px); }
.decor-colline { position: absolute; left: -6%; right: -6%; bottom: 0; filter: drop-shadow(0 -5px 5px rgba(43, 33, 64, .10)); transition: translate .5s var(--doux); }
.decor-colline.c1 { height: 46%; background: var(--papier-3); translate: calc(var(--px) * -8px) calc(var(--py) * -3px);
  clip-path: path("M0 120 C 200 20 420 150 700 70 S 1200 0 1500 90 S 2000 40 2400 110 V 2000 H 0 Z"); }
.decor-colline.c2 { height: 34%; background: color-mix(in srgb, var(--monde) 34%, var(--papier-2)); translate: calc(var(--px) * -16px) calc(var(--py) * -5px);
  clip-path: path("M0 60 C 240 150 460 10 760 80 S 1250 150 1600 50 S 2100 120 2400 60 V 2000 H 0 Z"); }
.decor-colline.c3 { height: 20%; background: color-mix(in srgb, var(--monde) 58%, var(--papier)); translate: calc(var(--px) * -28px) calc(var(--py) * -8px);
  clip-path: path("M0 70 C 180 10 420 90 680 40 S 1150 0 1500 70 S 2050 20 2400 60 V 2000 H 0 Z"); }
.decor-nuage { position: absolute; height: clamp(26px, 6vmin, 54px); aspect-ratio: 2.6; background: var(--blanc); border-radius: 999px; opacity: .92;
  box-shadow: var(--ombre-1); animation: nuage 60s linear infinite alternate; }
.decor-nuage::before, .decor-nuage::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.decor-nuage::before { width: 42%; aspect-ratio: 1; left: 16%; bottom: 38%; } .decor-nuage::after { width: 32%; aspect-ratio: 1; right: 18%; bottom: 44%; }
@keyframes nuage { to { translate: 9vw 0; } }

/* Feuille de papier : carte, panneau, bulle. */
.feuille { background: var(--blanc); border-radius: var(--r-3); box-shadow: var(--ombre-2), var(--ombre-papier); padding: var(--ecart); position: relative; }
.feuille.pliee::after { /* coin plié */ content: ""; position: absolute; right: 0; top: 0; width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--papier) 50%, var(--papier-3) 50%); border-radius: 0 var(--r-3) 0 var(--r-1); box-shadow: -3px 3px 5px -2px rgba(43, 33, 64, .2); }

/* Boutons : gros, bombés, ils s'enfoncent. .bouton.rond pour les icônes ; .bouton.or pour l'action principale. */
.bouton { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-width: var(--cible); min-height: var(--cible); padding: 0 1.2em; border-radius: var(--r-rond); font-weight: 800; color: var(--blanc);
  background: var(--carmin); box-shadow: 0 6px 0 var(--carmin-2), 0 14px 20px -8px rgba(43, 33, 64, .4); position: relative; top: 0;
  transition: top var(--vite), box-shadow var(--vite), scale var(--moyen) var(--rebond); touch-action: manipulation; }
.bouton:active, .bouton.g-appui { top: 5px; box-shadow: 0 1px 0 var(--carmin-2), 0 4px 8px -4px rgba(43, 33, 64, .4); }
.bouton.or { background: var(--or); color: var(--encre); box-shadow: 0 6px 0 var(--or-2), 0 14px 20px -8px rgba(43, 33, 64, .4); }
.bouton.or:active, .bouton.or.g-appui { box-shadow: 0 1px 0 var(--or-2), 0 4px 8px -4px rgba(43, 33, 64, .4); }
.bouton.clair { background: var(--blanc); color: var(--encre); box-shadow: 0 6px 0 var(--papier-3), 0 14px 20px -8px rgba(43, 33, 64, .3); }
.bouton.clair:active, .bouton.clair.g-appui { box-shadow: 0 1px 0 var(--papier-3), 0 4px 8px -4px rgba(43, 33, 64, .3); }
.bouton.rond { padding: 0; width: var(--cible); }
.bouton:focus-visible { outline: 4px solid var(--or); outline-offset: 4px; }

/* Carte-réponse : grande cible de papier (lettre, nombre, image). */
.carte { display: grid; place-items: center; min-width: calc(var(--cible) * 1.2); min-height: calc(var(--cible) * 1.3); padding: 8px 14px;
  background: var(--blanc); border-radius: var(--r-2); box-shadow: var(--ombre-1), var(--ombre-papier), 0 0 0 4px color-mix(in srgb, var(--monde) 0%, transparent);
  font-size: var(--t-geant); font-weight: 800; line-height: 1; cursor: pointer; transition: box-shadow var(--moyen), rotate var(--moyen) var(--rebond); }
.carte:nth-child(odd) { rotate: -1.5deg; } .carte:nth-child(even) { rotate: 1.5deg; }
.carte.juste { box-shadow: var(--ombre-2), 0 0 0 6px var(--or); rotate: 0deg; animation: bravo .6s var(--rebond); }
.carte.non { animation: non .45s; }            /* l'erreur : un petit « non » de la tête, jamais de rouge, jamais de croix */
@keyframes bravo { 30% { scale: 1.18; } }
@keyframes non { 20% { translate: -9px 0; rotate: -3deg; } 50% { translate: 8px 0; rotate: 3deg; } 80% { translate: -4px 0; } }

/* Ligne du parent : la phrase à lire, jamais coupée. */
.parent { margin: 0; padding: .5em 1em calc(.5em + var(--bas)); text-align: center; font-size: var(--t-petit); font-weight: 700; color: var(--encre-2); text-wrap: balance; }

/* Jauge de graines (5 réussites) et titre. */
.graines { display: inline-flex; gap: 8px; } .graines i { width: 18px; height: 18px; border-radius: 50%; background: var(--encre-3); transition: background var(--moyen), scale var(--moyen) var(--rebond); }
.graines i.pleine { background: var(--or); scale: 1.25; box-shadow: 0 0 0 4px rgba(242, 182, 50, .25); }
.titre { margin: 0; font-size: var(--t-titre); font-weight: 900; letter-spacing: -.01em; color: var(--carmin); text-wrap: balance; }
.titre b { color: var(--or-2); font-weight: 900; }

/* L'emblème : la sphère armillaire à étoile, signature de Sib'. <span class="armillaire"></span> ; taille par font-size. */
.armillaire { display: inline-block; width: 1em; height: 1em; position: relative; vertical-align: middle; }
.armillaire::before, .armillaire::after, .armillaire i { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: .07em solid var(--or); }
.armillaire::before { animation: anneau-a 7s linear infinite; } .armillaire::after { animation: anneau-b 9s linear infinite; border-color: var(--or-2); }
.armillaire i { inset: 0; border-width: .09em; }
.armillaire b { position: absolute; inset: 30%; background: var(--carmin); clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); animation: etoile 2.4s ease-in-out infinite; }
@keyframes anneau-a { from { transform: rotateY(0) rotateZ(24deg) scaleY(.36); } to { transform: rotateY(0) rotateZ(384deg) scaleY(.36); } }
@keyframes anneau-b { from { transform: rotateZ(-70deg) scaleX(.36); } to { transform: rotateZ(-430deg) scaleX(.36); } }
@keyframes etoile { 50% { scale: 1.25; rotate: 12deg; } }

/* Entrées en scène : poser .entre sur un élément, --i pour le décalage en cascade. */
.entre { animation: entre .5s var(--rebond) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes entre { from { opacity: 0; translate: 0 26px; scale: .8; } }

@media (prefers-reduced-motion: reduce) {
  .decor-nuage, .armillaire::before, .armillaire::after, .armillaire b { animation: none; }
  .entre, .carte.juste, .carte.non { animation-duration: .01s; } .decor-colline, .decor-soleil { translate: none; }
}