/* ============================================================
   MICHA & KIDS - Styles communs partagés par toutes les pages
   ============================================================
   Variables, fonts, reset, body, .page, .back-link
   ----- Ajouts spécifiques par jeu : restent inline dans chaque HTML
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap");

@font-face {
  font-family: 'Kabouter';
  src: url('fonts/Kabouter-Regular.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'TTBluescreens';
  src: url('fonts/TypeType-TTBluescreensRound-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Palette de base */
  --c-dark-green:  #5BA73A;
  --c-mid-green:   #8DC641;
  --c-light-green: #C9E27D;
  --c-red:         #E94B6F;
  --c-yellow:      #F1A93C;
  --c-yellow-pill: #FFD24A;
  --c-black:       #1a1a1a;
  --c-blue:        #4a90d9;
  --c-purple:      #9b59d4;
  --c-brown:       #b07440;

  /* Ciel */
  --sky-1: #95cce5;
  --sky-2: #afdaee;
  --sky-3: #d0eaf5;

  /* Encre & papier */
  --ink:   #1f2a44;
  --ink-2: #4a5775;
  --paper: #ffffff;
  --line:  #1d3a8a;

  --shadow: 0 14px 40px rgba(31, 42, 68, .12), 0 2px 6px rgba(31, 42, 68, .08);
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Kabouter', 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  background: var(--sky-2);
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 0% 0%, #ddf1fa 0%, transparent 70%),
    radial-gradient(900px 500px at 100% 100%, #ffffff 0%, transparent 50%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 60%, var(--sky-3) 100%);
  overflow-x: hidden;
}
.page {
  position: relative; z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(8px, 1.2vw, 16px);
}

/* ============== RANGEE D'ACTIONS - retour puis impression ==============
   Les deux boutons sont sur la meme ligne, centres sous le logo comme lui. La
   rangee passe en colonne plutot que de les coller quand la largeur ne suffit
   plus, et garde alors le meme centrage. La marge haute detache l'ensemble de
   l'enseigne, dont le rond descend bas dans son cadre. */
.jeux-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: clamp(12px, 1.8vw, 22px);
  margin-bottom: clamp(14px, 2vw, 22px);
}
/* Des deux bords de la page des que les deux boutons y tiennent cote a cote.
   En dessous la rangee passe en colonne et garde le centrage. Le palier est
   celui ou la somme des deux boutons, gouttiere comprise, entre dans .page :
   356 px pour une rangee large de la fenetre moins 16 px de marges, soit
   372 px de fenetre. Releve par tools/visual-audit, a revoir si un libelle,
   une typo ou un rembourrage change. */
@media (min-width: 375px) {
  .jeux-actions { justify-content: space-between; }
}
.jeux-actions .back-link { margin-bottom: 0; }

/* ============== BACK LINK - style .btn-primary du site ============== */
.back-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  color: #fff;
  padding: .85rem 1.5rem;
  border: 1px solid #26358c;
  border-radius: 2rem;
  background: #26358c;
  margin-bottom: clamp(14px, 2vw, 22px);
  transition: color .3s;
  /* Meme typo que les pastilles de la landing Micha : Kabouter en capitales.
     La fonte est un titrage, elle n'a pas de gras : rester en 400 evite le
     faux gras synthetise par le navigateur. */
  font-family: 'Kabouter', 'Fredoka', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .back-link { padding: .85rem 3rem; }
}
.back-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  transition-duration: .3s;
}
.back-link:hover,
.back-link:focus,
.back-link:active {
  color: #26358c;
}
.back-link:hover::before,
.back-link:focus::before,
.back-link:active::before {
  width: 100%;
}
.back-arrow {
  width: 17px;
  height: 11px;
  flex-shrink: 0;
  transform: scaleX(-1); /* flèche du site orientée retour */
  fill: #d61727;
}

/* ============== PRINT LINK - contrepartie blanche du retour ==============
   Meme forme et meme taille que .back-link, teintes inversees : fond blanc et
   texte bleu, comme la pastille « Imprimer » de la landing. Le fond se remplit
   depuis la droite, en miroir du bouton de retour. */
.print-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  z-index: 0;
  text-decoration: none;
  color: #26358c;
  padding: .85rem 1.5rem;
  border: 1px solid #26358c;
  border-radius: 2rem;
  background: #fff;
  transition: color .3s;
  font-family: 'Kabouter', 'Fredoka', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .print-link { padding: .85rem 3rem; }
}
.print-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: #26358c;
  transition-duration: .3s;
}
.print-link:hover,
.print-link:focus,
.print-link:active {
  color: #fff;
}
.print-link:hover::before,
.print-link:focus::before,
.print-link:active::before {
  width: 100%;
}
.print-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: #d61727; /* meme rouge que la fleche du bouton retour */
}

/* ============== HINT BADGE (Astuce) ============== */
.hint-badge {
  display: inline-block;
  background: var(--c-yellow-pill);
  color: var(--line);
  font-family: 'Quicksand', 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 14px 6px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #d9a812;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.hint-badge:hover  { transform: translateY(-2px); box-shadow: 0 5px 0 #d9a812; }
.hint-badge:active { transform: translateY(1px);  box-shadow: 0 2px 0 #d9a812; }

/* ============== HEADER JEUX - logo seul ==============
   Enseigne de marque commune à tous les jeux : le logo posé
   sur le ciel, centré. Il tombe et se cale à l'ouverture. */
.jeux-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(-1 * clamp(8px, 1.2vw, 16px)); /* collé en haut : annule le padding haut de .page */
  padding: 0 0 clamp(8px, 1.4vw, 16px);
}
.jeux-logo-link {
  display: inline-block;
  margin-top: calc(-1 * clamp(16px, 2.4vw, 30px));
  line-height: 0;
  border-radius: 50%;
}
.jeux-logo-link:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 6px;
}
.jeux-logo {
  display: block;
  width: clamp(150px, 21vw, 224px);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(31, 42, 68, .16));
  animation: jeux-logo-drop .8s cubic-bezier(.18, .7, .24, 1.35) both;
}
@keyframes jeux-logo-drop {
  0%   { opacity: 0; transform: translateY(-22px) scale(.9); }
  55%  { opacity: 1; transform: translateY(5px)   scale(1.03); }
  78%  {             transform: translateY(-2px)  scale(.995); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jeux-logo { animation: none; }
}

/* ============== FOOTER - repris de alsace-lait.com ============== */
.jeux-footer {
  position: relative;
  background: #fff;
  margin-top: clamp(28px, 5vw, 56px);
  padding: 2rem 1rem 2.25rem;
  text-align: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #000;
}
.jeux-footer .footer-logo { display: inline-block; }
.jeux-footer .footer-logo img { width: 165px; max-width: 100%; height: auto; }
.jeux-footer .discover { margin: 2.5rem 0 .5rem; }
.jeux-footer .discover p { margin: 0 0 .7rem; font-weight: 700; }
.jeux-footer .discover img { height: 40px; width: auto; }
.jeux-footer nav ul {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.jeux-footer a { text-decoration: none; }
.jeux-footer a:hover { text-decoration: underline; }
.jeux-footer .footer-top a {
  color: #000;
  font-weight: 500;
  font-size: 14px;
  margin: 0 20px;
}
.jeux-footer .footer-bottom ul { margin-top: .9rem; }
.jeux-footer .footer-bottom li { display: flex; align-items: center; }
.jeux-footer .footer-bottom a,
.jeux-footer .footer-bottom .dashed {
  color: #afafaf;
  font-weight: 500;
  font-size: 12px;
}
.jeux-footer .footer-bottom .dashed { margin: 0 .5rem; }
@media (max-width: 767px) {
  .jeux-footer .footer-bottom ul { flex-direction: column; }
  .jeux-footer .footer-bottom .dashed { display: none; }
}