/* base.css — Fondations PARTAGÉES (landing + jeu) : palette, reset, blobs,
   header, boutons bonbon, bannière cookies, keyframes communs. */
:root {
  --coral: #FF5C8A;
  --grape: #7C5CFF;
  --sky:   #35B6FF;
  --lime:  #37D9A0;
  --sun:   #FFC24B;

  --ink:      #3B2E52;   /* texte principal */
  --ink-soft: #7C7191;   /* texte secondaire */
  --card:     #FFFFFF;
  --line:     #EFE7F5;

  --bg1: #FFF4E8;        /* crème */
  --bg2: #FFE7F1;        /* rose poudré */
  --bg3: #EAF3FF;        /* bleu très clair */

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 13px;
  --shadow-card: 0 14px 34px rgba(93, 61, 120, 0.13);
  --shadow-soft: 0 6px 16px rgba(93, 61, 120, 0.14);
  --ease: cubic-bezier(.34, 1.36, .5, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--bg2), transparent 60%),
    radial-gradient(1100px 800px at 100% 0%, var(--bg3), transparent 55%),
    linear-gradient(160deg, var(--bg1), #FFF9F0 60%, var(--bg2));
  background-attachment: fixed;
}

/* Bulles décoratives en fond */
.blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .28; }
.b1 { width: 240px; height: 240px; background: var(--coral); top: 8%; right: 6%; }
.b2 { width: 180px; height: 180px; background: var(--sky);  bottom: 12%; left: 4%; }
.b3 { width: 140px; height: 140px; background: var(--sun);  top: 40%; left: 46%; opacity:.18; }
.b4 { width: 200px; height: 200px; background: var(--lime); bottom: 4%; right: 18%; opacity:.2; }

/* ---------------- HEADER ---------------- */
.hero {
  position: relative; z-index: 30;   /* au-dessus du contenu landing/jeu (z-index:1) → le menu langue reste cliquable */
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 34px 10px;
}
.hero-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.hero-emoji {
  width: 56px; height: 56px; display: block;
  border-radius: 18px; box-shadow: var(--shadow-soft);
  transform: rotate(-6deg);
}
.hero-brand {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: .3px;
  background: linear-gradient(100deg, var(--coral), var(--grape) 55%, var(--sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tag {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; font-size: 13px;
  color: var(--grape); background: #fff; padding: 8px 14px;
  border-radius: 999px; box-shadow: var(--shadow-soft);
}

/* ===== "Le site qui vit" ===== */
/* micro-rebond des gros boutons au survol */
@keyframes candyBounce { 0%{transform:translateY(0)} 35%{transform:translateY(-4px)} 70%{transform:translateY(-1px)} 100%{transform:translateY(-2px)} }
.candy.big:hover { animation: candyBounce .32s var(--ease); }

/* ===== BANNIÈRE COOKIES ===== */
.cookie-banner {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 100; width: min(720px, calc(100% - 24px));
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-card);
  padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  animation: tipIn .3s var(--ease);
}
.ck-txt { flex: 1; min-width: 220px; font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.ck-txt b { color: var(--grape); }
.ck-btns { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ck-link { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.ck-link:hover { color: var(--grape); text-decoration: underline; }
.ck-b { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; cursor: pointer; border: none; }
.ck-refuse { background: #fff; color: var(--ink-soft); border: 2px solid var(--line); }
.ck-accept { background: var(--lime); color: #08402e; box-shadow: 0 3px 0 #21b585; }
.ck-accept:hover { filter: brightness(1.03); }
@media (max-width: 560px) { .ck-btns { width: 100%; justify-content: flex-end; margin-left: 0; } }
/* ---------------- BOUTONS "BONBON" ---------------- */
.candy {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
  font-size: 15px; color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 13px 18px; cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.14), var(--shadow-soft);
  transition: transform .14s ease-out, box-shadow .14s ease-out, filter .14s ease-out;
  position: relative;
}
.candy::before {   /* reflet du dessus */
  content: ""; position: absolute; inset: 3px 3px auto 3px; height: 42%;
  border-radius: 14px 14px 20px 20px;
  background: linear-gradient(#ffffff70, #ffffff00);
  pointer-events: none;
}
.candy:hover { filter: brightness(1.05); transform: translateY(-1px); }
.candy:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.14), var(--shadow-soft); }
.candy:disabled { filter: grayscale(.5) brightness(1.05); opacity: .55; cursor: not-allowed; box-shadow: 0 5px 0 rgba(0,0,0,.1); }
.candy.full { width: 100%; }
.candy.big { font-size: 17px; padding: 16px 18px; }

.candy-coral { background: var(--coral); box-shadow: 0 5px 0 #d63e6c, var(--shadow-soft); }
.candy-grape { background: var(--grape); box-shadow: 0 5px 0 #5b3fd6, var(--shadow-soft); }
.candy-sky   { background: var(--sky);   box-shadow: 0 5px 0 #1f92d6, var(--shadow-soft); }
.candy-lime  { background: var(--lime);  box-shadow: 0 5px 0 #21b585, var(--shadow-soft); color: #08402e; }
.candy-sun   { background: var(--sun);   box-shadow: 0 5px 0 #e0a01f, var(--shadow-soft); color: #5b3d00; }
.candy-ghost {
  background: #fff; color: var(--ink);
  box-shadow: 0 3px 0 var(--line), var(--shadow-soft);
  border: 2px solid var(--line);
}
.candy-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line), var(--shadow-soft); }
.kbd {
  font-family: "Fredoka", system-ui, sans-serif; font-size: 11px; font-weight: 600;
  background: var(--line); color: var(--ink-soft);
  padding: 2px 7px; border-radius: 7px; margin-left: 4px;
}

@keyframes shakeX {
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}
}
.shake { animation: shakeX .4s; }
/* keyframes partagés (utilisés par la bannière cookies et la 404) */
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes missPop { 0%{opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-6deg)} 60%{opacity:1; transform:translate(-50%,-50%) scale(1.12)} 100%{transform:translate(-50%,-50%) scale(1)} }

/* ===== Sélecteur de langue déroulant (scalable N langues) ===== */
.lang-menu { position: relative; display: inline-block; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; box-shadow: var(--shadow-soft); transition: border-color .14s; }
.lang-btn:hover { border-color: var(--grape); }
.lang-globe { font-size: 14px; }
.lang-caret { font-size: 10px; color: var(--ink-soft); transition: transform .16s; }
.lang-menu.open .lang-caret { transform: rotate(180deg); }
.lang-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; margin: 0; padding: 6px; list-style: none; min-width: 168px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); animation: tipIn .16s var(--ease); }
.lang-list li { margin: 0; }
.lang-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); padding: 9px 11px; border-radius: 10px; transition: background .12s; }
.lang-opt:hover { background: rgba(124, 92, 255, .09); }
.lang-opt.on { color: var(--grape); }
.lang-opt.on::after { content: '✓'; margin-left: auto; font-weight: 700; }
.lang-flag { font-size: 16px; line-height: 1; }