/* Mise en page generique des ecrans : header, grille de tuiles, pied de page */

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  animation: screen-in 0.25s ease-out;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 24px;
  gap: 12px;
}

.top-bar__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4em;
  font-weight: 700;
}

.lang-switcher {
  display: flex;
  gap: 8px;
}

.lang-switcher button {
  min-height: 56px;
  min-width: 56px;
  font-size: 1.6em;
  padding: 4px;
}

.lang-switcher button[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--theme-primary, var(--color-primary));
}

.icon-button {
  min-height: 56px;
  min-width: 56px;
  font-size: 1.5em;
  padding: 4px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.tile {
  /* --tile-color : couleur de la rubrique (bandeau haut + ombre de relief) */
  --tile-color: var(--theme-primary, var(--color-primary));
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-top: 8px solid var(--tile-color);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--tile-color) 35%, #c9d3df), var(--shadow-soft);
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-height: 180px;
  justify-content: center;
}

.tile:active {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tile-color) 35%, #c9d3df), var(--shadow-soft);
}

.tile__emoji {
  font-size: 3.2em;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-color) 14%, white);
}

/* Grandes rubriques de l'accueil enfant (Decouvertes, Anglais...) */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin: 8px 0 28px;
}

.hub-grid .tile {
  min-height: 150px;
  padding: 16px 12px 20px;
}

.hub-grid .tile__emoji {
  font-size: 2.6em;
}

.tile__label {
  font-size: 1.15em;
  font-weight: 700;
}

.tile__sub {
  font-size: 0.85em;
  color: var(--color-text-soft);
}

.tile--inactive {
  opacity: 0.45;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  margin-bottom: 20px;
}

.card h2 {
  font-size: 1.2em;
}

.actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 320px;
  margin: 24px auto;
}

.pin-pad button {
  font-size: 1.6em;
  aspect-ratio: 1;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 16px 0;
}

.pin-dots span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d9e2ec;
  display: inline-block;
}

.pin-dots span.filled {
  background: var(--theme-primary, var(--color-primary));
}

.error-text {
  color: var(--color-danger);
  text-align: center;
  font-weight: 600;
  min-height: 1.4em;
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field-row label {
  font-weight: 600;
  font-size: 0.9em;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f6;
}

.toggle-row:last-child {
  border-bottom: none;
}

.switch {
  width: 64px;
  height: 36px;
  border-radius: 999px;
  background: #d9e2ec;
  position: relative;
  padding: 0;
  min-width: unset;
  min-height: unset;
  box-shadow: none;
}

.switch[aria-pressed="true"] {
  background: var(--color-success);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  transition: transform 0.15s ease;
}

.switch[aria-pressed="true"]::after {
  transform: translateX(28px);
}

.chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}

.chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  font-weight: 600;
  min-height: unset;
}

.chip[aria-pressed="true"] {
  background: var(--theme-primary, var(--color-primary));
  color: var(--color-primary-contrast);
}

.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* ratio 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.dd-board {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.dd-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.dd-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 10px 14px;
  font-size: 1.1em;
  font-weight: 700;
  user-select: none;
  touch-action: none;
}

.dd-item.dragging {
  box-shadow: 0 12px 24px rgba(31, 41, 51, 0.25);
  transform: scale(1.08) rotate(-3deg);
}

.dd-item.selected {
  outline: 4px solid var(--color-primary);
  outline-offset: 3px;
  transform: scale(1.05);
}

.dd-item.placed {
  opacity: 0.9;
}

.dd-zone {
  position: absolute;
  /* Double contour (sombre + clair) : visible sur fond clair comme fonce */
  border: 3px dashed rgba(31, 41, 51, 0.55);
  outline: 2px dashed rgba(255, 255, 255, 0.8);
  outline-offset: -6px;
  background: rgba(61, 124, 255, 0.10);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  padding: 4px;
}

.dd-zone.filled {
  border-style: solid;
  border-color: var(--color-success);
  outline: none;
  background: rgba(255, 255, 255, 0.35);
}

.dd-zone.drop-target,
.dd-zone-static.drop-target {
  background: rgba(61, 124, 255, 0.28);
  border-color: var(--color-primary);
  transform: scale(1.04);
}

/* Refus : la piece tremble avant de revenir */
.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { translate: 0; }
  20% { translate: -10px; }
  40% { translate: 10px; }
  60% { translate: -6px; }
  80% { translate: 6px; }
}

/* Indice : la bonne cible pulse doucement */
.hint-pulse {
  animation: hint-pulse 0.9s ease-in-out 3;
}

@keyframes hint-pulse {
  50% { transform: scale(1.08); filter: drop-shadow(0 0 10px #ffd84d); }
}

/* Bulle de retour commune (reussite / erreur / info) */
.feedback-bubble {
  min-height: 2.6em;
  margin: 4px auto 12px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  max-width: 640px;
  visibility: hidden;
}

.feedback-bubble.is-success,
.feedback-bubble.is-error,
.feedback-bubble.is-info {
  visibility: visible;
  animation: bubble-pop 0.3s ease-out;
}

.feedback-bubble.is-success { background: var(--color-success-soft); color: var(--color-success); }
.feedback-bubble.is-error { background: var(--color-danger-soft); color: var(--color-danger); }
.feedback-bubble.is-info { background: #fff6d6; color: #7a5a00; }

@keyframes bubble-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Pluie d'emojis de fin d'activite */
.celebrate-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2000;
}

.celebrate-layer span {
  position: absolute;
  top: -2em;
  font-size: 2.2em;
  animation: celebrate-fall linear forwards;
}

@keyframes celebrate-fall {
  to { transform: translateY(110vh) rotate(540deg); }
}

.dd-zone-static {
  border: 3px dashed #c8d2db;
  border-radius: var(--radius-md);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--color-surface);
}

.dd-zone-static.filled {
  border-style: solid;
  border-color: var(--color-success);
}

.dd-zone-static__label {
  font-weight: 700;
}

.dd-zone-static__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 420px;
  margin: 20px auto 0;
}

.memory-card {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--theme-primary, var(--color-primary));
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  padding: 0;
}

.memory-card.flipped,
.memory-card.matched {
  background: var(--color-surface);
}

.memory-card.matched {
  opacity: 0.55;
}

.toddler-tile {
  min-height: 220px;
}

.toddler-tile .tile__emoji {
  font-size: 4.5em;
}

.toddler-tile .tile__label {
  font-size: 1.4em;
}

.countdown-number {
  font-size: 6em;
  text-align: center;
  font-weight: 700;
  color: var(--theme-primary, var(--color-primary));
}

.dig-site {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 20px auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5em;
  box-shadow: var(--shadow-soft);
}

.dig-overlay {
  position: absolute;
  inset: 0;
  display: grid;
}

.dig-tile {
  background: #a9784f;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
  transition: opacity 0.25s ease;
}

.dig-tile.cleared {
  opacity: 0;
  pointer-events: none;
}

.flashcard {
  text-align: center;
  padding: 30px 20px;
}

.flashcard__emoji {
  font-size: 5em;
}

.flashcard__word {
  font-size: 1.6em;
  font-weight: 700;
  margin-top: 10px;
}

.gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.gauge__icon {
  font-size: 1.6em;
}

.gauge__track {
  flex: 1;
  height: 22px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  width: 100%;
  background: var(--theme-accent, var(--color-success));
  border-radius: 999px;
  transition: width 1s linear;
}

.tag {
  display: inline-block;
  font-size: 0.75em;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--color-text-soft);
  font-weight: 600;
}

.gallery-thumb {
  padding: 0;
  overflow: hidden;
}

.gallery-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.gallery-thumb .tile__label {
  padding: 8px 12px 4px;
}

.gallery-thumb .tile__sub {
  padding-bottom: 12px;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 32, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  z-index: 50;
}

.gallery-lightbox img {
  max-width: min(90vw, 700px);
  max-height: 65vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  object-fit: contain;
}

.gallery-lightbox__caption {
  color: #fff;
  text-align: center;
}

.gallery-form-preview {
  width: 160px;
  max-height: 160px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  margin-top: 8px;
  display: none;
}

@media (max-width: 480px) {
  .screen { padding: 16px; }
  body { font-size: 18px; }
}

/* ---------- Puzzle du squelette (style radiographie) ---------- */

.xray-board {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 50% 35%, #1f3b66 0, #0d1b33 70%);
  box-shadow: inset 0 0 40px rgba(120, 180, 255, 0.25), var(--shadow-soft);
}

.xray-board svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.xray-body {
  fill: rgba(140, 190, 255, 0.10);
  stroke: rgba(140, 190, 255, 0.35);
  stroke-width: 2;
}

.bone-slot {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(210, 230, 255, 0.75);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  cursor: pointer;
  transition: fill 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.bone-slot.drop-target {
  fill: rgba(255, 216, 77, 0.35);
  stroke: #ffd84d;
  stroke-dasharray: none;
}

.bone-slot.filled {
  display: none;
}

.bone-shape {
  fill: #f6efdc;
  stroke: #b9a988;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.bone-shape--model {
  opacity: 0.75;
  fill: #d9d2bf;
}

.bone-shape--placed {
  animation: bone-glow 1s ease-out;
}

@keyframes bone-glow {
  0% { filter: drop-shadow(0 0 0 #fff5b8); }
  40% { filter: drop-shadow(0 0 14px #fff5b8); }
  100% { filter: drop-shadow(0 0 0 #fff5b8); }
}

/* Danse finale : chaque groupe d'os se balance */
.skeleton-dance .bone-group {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: bone-wiggle 0.5s ease-in-out 6 alternate;
}

.skeleton-dance .bone-group--center {
  transform-origin: 50% 100%;
  animation-name: bone-bounce;
}

@keyframes bone-wiggle {
  from { rotate: -8deg; }
  to { rotate: 8deg; }
}

@keyframes bone-bounce {
  from { translate: 0 0; }
  to { translate: 0 -6px; }
}

.bone-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.bone-piece {
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding: 8px 10px 6px;
  font-size: 0.85em;
}

.bone-piece svg {
  /* Hauteur fixe, largeur selon la forme : un os long reste lisible */
  height: 76px;
  width: auto;
  max-width: 120px;
}

.bone-fact {
  max-width: 640px;
  margin: 0 auto;
}

.level-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #0d1b33;
  color: #cfe3ff;
  font-size: 0.6em;
  vertical-align: middle;
}

.skeleton-layout {
  display: grid;
  gap: 16px;
}

.xray-board svg {
  max-height: 72vh;
}

@media (min-width: 760px) {
  .skeleton-layout {
    grid-template-columns: minmax(0, 380px) 1fr;
    align-items: start;
  }

  .skeleton-layout .bone-tray {
    margin-top: 0;
    align-content: flex-start;
  }
}